HTML básico - Aprendendo desenvolvimento web

HTML básico
===========

* Anterior
* Menu: Getting started with the web
* Próxima

HTML (Linguagem de Marcação de Hipertexto) é o código que você usa para estruturar uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser estruturado em parágrafos, em uma lista com marcadores ou usando imagens e tabelas. Como o título sugere, este artigo fornecerá uma compreensão básica do HTML e suas funções.

Então, o que é HTML?
--------------------

HTML não é uma linguagem de programação; é uma *linguagem de marcação*, usada para definir a estrutura do seu conteúdo. HTML consiste de uma série de **elementos**, que você usa para delimitar ou agrupar diferentes partes do conteúdo para que ele apareça ou atue de determinada maneira. As tags anexas podem transformar uma palavra ou imagem num hiperlink, pode colocar palavras em itálico, pode aumentar ou diminuir a fonte e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:
```

Meu gatinho é muito mal humorado
```

Se quiséssemos que a linha permanecesse por si só, poderíamos especificar que é um parágrafo colocando-a em uma tag de parágrafo:

```html
<p>Meu gatinho é muito mal humorado</p>
```

### Anatomia de um elemento HTML

Vamos explorar esse parágrafo mais profundamente.

![Imagem mostrando como funciona a tag P](/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics/gato-rabujento-pequeno.png)

As principais partes de um elemento são:

1. A **tag de abertura**: Consiste no nome do elemento (no caso, p), envolvido em **parênteses angulares** de abertura e fechamento. Isso demonstra onde o elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.
2. A **tag de fechamento**: Isso é a mesma coisa que a tag de abertura, exceto que inclui uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba — nesse caso, onde é o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos erros mais comuns de iniciantes e pode levar a resultados estranhos.
3. O **conteúdo**: Esse é o conteúdo do elemento, que nesse caso é apenas texto.
4. O **elemento**: A tag de abertura, a de fechamento, e o conteúdo formam o elemento.

Elementos também podem ter atributos, que parecem assim:

![Imagem mostrando elemento na tag P](/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics/gato-rabujento-atributo-pequeno.png)

Atributos contém informação extra sobre o elemento que você não quer que apareça no conteúdo real. Aqui, `class` é o nome do atributo e `editor-note` é o valor do atributo. O atributo `class` permite que você forneça ao elemento um identificador que possa ser usado posteriormente para aplicar ao elemento informações de estilo e outras coisas.

Um atributo sempre deve ter:

1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um).
2. O nome do atributo, seguido por um sinal de igual.
3. Aspas de abertura e fechamento, envolvendo todo o valor do atributo.

**Nota:** Valores de atributos simples que não contém espaço em branco ASCII (ou qualquer um dos caracteres `"` `'` ``` `=` `<` `>`) podem permanecer sem aspas, mas é recomendável colocar em todos os valores de atributos, pois isso torna o código mais consistente e compreensível.

### Aninhando elementos

Você pode colocar elementos dentro de outros elementos também — isso é chamado de **aninhamento**. Se quiséssemos afirmar que nosso gato é **muito** mal-humorado, poderíamos envolver a palavra "muito" em um elemento `<strong>`, o que significa que a palavra deve ser fortemente enfatizada:

```html

Meu gatinho é muito mal humorado.

```

Você precisa, no entanto, certificar-se de que seus elementos estejam adequadamente aninhados. No exemplo acima, abrimos primeiro o elemento `<p>`, depois o elemento `<strong>`; portanto, temos que fechar primeiro o elemento `<strong>`, depois o elemento `<p>`. O código abaixo está incorreto:

```html

Meu gatinho é muito mal humorado.

```

Os elementos precisam ser abertos e fechados corretamente para que eles estejam claramente visíveis dentro ou fora um do outro. Se eles se sobrepuserem conforme mostrado acima, seu navegador tentará adivinhar o que você estava tentando dizer, o que pode levar a resultados inesperados. Então não faça isso!

### Elementos vazios

Alguns elementos não possuem conteúdo e são chamados de **elementos vazios**. Considere o elemento `<img>` que temos na nossa página HTML:

```html

```

Ele contém dois atributos, mas não há tag `</img>` de fechamento, e não há conteúdo interno. Isso acontece porque um elemento de imagem não envolve conteúdo para ter efeito em si mesmo. Sua proposta é incorporar uma imagem na página HTML no lugar que o código aparece.

### Anatomia de um documento HTML

Isso resume o básico dos elementos HTML individuais, mas eles não são úteis por si só. Agora vamos ver como elementos individuais são combinados para formar uma página HTML inteira. Vamos visitar novamente os códigos que colocamos no exemplo de `index.html` (que vimos no artigo Lidando com arquivos):

```html
<!doctype html>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Minha página de teste</title>

```

Aqui nós temos:

* `<!DOCTYPE html>` — o doctype. É a parte inicial obrigatória do documento. Nas névoas do tempo, quando o HTML era novo (por volta de 1991/2), doctypes eram criados para agir como links para um conjunto de regras que a página HTML tinha que seguir para ser considerada um bom HTML, o que poderia significar checagem automática de erros e outras coisas úteis. No entanto, atualmente, eles não fazem muito sentido e são basicamente necessários apenas para garantir que o documento se comporte corretamente. Isso é tudo que você precisa saber agora.
* `<html></html>` — o elemento `<html>`. Esse elemento envolve todo o conteúdo da página e às vezes é conhecido como o elemento raiz.
* `<head></head>` — o elemento `<head>`. Esse elemento age como um recipiente de tudo o que você deseja incluir em uma página HTML que *não é* o conteúdo que você quer mostrar para quem vê sua página. Isso inclui coisas como palavras-chave e uma descrição que você quer que apareça nos resultados de busca, CSS para dar estilo ao conteúdo, declarações de conjuntos de caracteres e etc.
* `<meta charset="utf-8">` — esse elemento define o conjunto de caracteres que seu documento deve usar para o UTF-8, que inclui praticamente todos os caracteres da grande maioria dos idiomas escritos. Essencialmente, agora ele pode manipular qualquer conteúdo textual que você possa colocar. Não há razão para não definir isso e assim pode ajudar a evitar alguns problemas no futuro.
* `<title></title>` — o elemento `<title>`. Ele define o título da sua página, que é o título que aparece na guia do navegador onde sua página é carregada. Ele também é usado para descrever a página quando você a adiciona aos favoritos.
* `<body></body>` — o elemento `<body>`. Contém *todo* o conteúdo que você quer mostrar ao público que visita sua página, seja texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis ou qualquer outra coisa.
Imagens
-------

Vamos voltar nossa atenção para o elemento `<img>` novamente:

```html

```

Como dissemos antes, isso incorpora uma imagem na nossa página na posição que aparece. Isso é feito pelo atributo `src` (*source*), que contém o caminho para nosso arquivo de imagem.

Incluímos também um atributo `alt` (*alternative*). Neste atributo, você especifica um texto descritivo para usuários que não podem ver a imagem, possivelmente devido aos seguintes motivos:

1. Eles são deficientes visuais. Usuários com deficiências visuais significativas costumam usar ferramentas chamadas leitores de tela para ler o texto alternativo para eles.
2. Algo deu errado, fazendo com que a imagem não seja exibida. Por exemplo, tente alterar deliberadamente o caminho dentro do atributo `src` para torná-lo incorreto. Se você salvar e recarregar a página, você deve ver algo assim no lugar da imagem:

![As palavras: my test image](/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics/alt-text-example.png)

As palavras-chave para o texto alternativo são "texto descritivo". O texto alternativo que você escreve deve fornecer ao leitor informações suficientes para ter uma boa ideia do que a imagem mostra. Neste exemplo, nosso texto "Minha imagem teste" não é bom para todos. Uma alternativa muito melhor para o nosso logotipo do Firefox seria "A logo do Firefox: uma raposa em chamas envolvendo a Terra."

Tente criar um texto alternativo melhor para sua imagem agora.

**Nota:** Saiba mais sobre acessibilidade em módulo de aprendizagem sobre acessibilidade.

Marcando o texto
----------------

Essa seção abordará alguns dos elementos HTML essenciais que você usará para marcar o texto.

### Cabeçalhos

Os elementos de cabeçalhos permitem especificar que certas partes do seu conteúdo são títulos ou subtítulos. Da mesma forma que um livro tem o título principal e os capítulos possuem títulos e subtítulos, um documento HTML também tem. HTML contém 6 níveis de título, `<h1>` (en-US) - `<h6>` (en-US), embora você normalmente só use de 3 a 4:

```html

Meu título principal

Meu título de alto nível

Meu subtítulo

Meu segundo subtítulo

```

**Nota:** Qualquer coisa em HTML entre `<!--` e `-->` é um **comentário HTML**. O navegador ignora comentários enquanto renderiza o código. Em outras palavras, eles não são visíveis na página – apenas no código. Os comentários HTML são uma forma de escrever notas úteis sobre seu código ou lógica.

Agora tente adicionar um título adequado à sua página HTML logo acima do elemento `<img>`.

**Nota:** você verá que seu título de nível 1 tem um estilo implícito. Não use elementos de cabeçalho para deixar o texto maior ou em negrito, pois eles são usados para acessibilidade e outros motivos, como SEO. Tente criar uma sequência significativa de títulos em suas páginas, sem pular níveis.

### Parágrafo

Como explicado acima, os elementos `<p>` são para conter parágrafos de texto; você os usará com frequência ao marcar um conteúdo de texto regular:

```html

Este é um parágrafo simples

```

Adicione seu texto de exemplo (você o obteve em *Como será o seu site?*) Em um ou alguns parágrafos, colocados diretamente abaixo do seu elemento `<img>`.

### Listas

Muito do conteúdo da web é de listas e o HTML tem elementos especiais para elas. Listas de marcação sempre consistem em pelo menos 2 elementos. Os tipos mais comuns de lista são ordenadas e não ordenadas:

1. **Listas não ordenadas** são para listas onde a ordem dos itens não importa, como uma lista de compras, por exemplo. Essas são envolvidas em um elemento `<ul>`.
2. **Listas Ordenadas** são para listas onde a ordem dos itens importa, como uma receita. Essas são envolvidas em um elemento `<ol>`.

Cada item dentro das listas é posto dentro de um elemento `<li>` (item de lista).

Por exemplo, se nós quisermos tornar uma parte de um parágrafo numa lista:

```html

  Na Mozilla, somos uma comunidade global de tecnólogos, pensadores e
  construtores trabalhando juntos ...

```

Nós podemos fazer assim:

```html

Na Mozilla, somos uma comunidade global de

tecnólogos

pensadores

construtores

trabalhando juntos ...

```

Tente adicionar uma lista ordenada ou não ordenada à sua página de exemplo.

Links
-----

Links são muito importantes — eles são o que faz da web ser de fato uma REDE! Para adicionar um link, precisamos usar um elemento simples — `<a>` — "a" é a forma abreviada de "âncora". Para transformar o texto do seu parágrafo em um link, siga estas etapas:

1. Escolha algum texto. Nós escolhemos o texto "Mozilla Manifesto".
2. Envolva o texto em um elemento `<a>` , assim:

```html
Mozilla Manifesto
```

3. Dê ao elemento `<a>` um atributo `href`, como mostrado abaixo:

```html
Mozilla Manifesto
```

4. Preencha o valor desse atributo com o endereço da Web que você deseja vincular o link:

```html
Mozilla Manifesto
```

Você pode obter resultados inesperados se omitir a parte `https://` ou o `http://`, o chamado *protocolo*, no começo do endereço web. Então depois de criar um link, clique nele para ter certeza de que ele está indo para onde você deseja.

**Nota:** `href` pode parecer, numa primeira impressão, uma escolha obscura para um nome de atributo. Se você está tendo problemas para lembrar do nome, lembre que significa ***h**ypertext **ref**erence*. (referência em hipertexto)

Adicione um link em sua página agora, se ainda não tiver feito isso.

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

Se você seguiu todas as instruções neste artigo, você deve terminar com uma página que pareça algo do tipo (você também pode vê-la aqui):

![Uma captura de tela da página da Web mostrando um logotipo do Firefox, um título dizendo que o mozilla é legal e dois parágrafos de texto de preenchimento](/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics/finished-test-page-small.png)

Se você ficar emperrado, pode sempre comparar seu trabalho com nosso código de exemplo finalizado no Github.

Aqui, nós só arranhamos na superfície do HTML. Para descobrir mais, vá a nossa Estruturando a web com HTML.

* Anterior
* Menu: Getting started with the web
* Próxima


Como a Web funciona - Aprendendo desenvolvimento web

Como a Web funciona
===================

* Anterior
* Menu: Getting started with the web

*Como a Web funciona* oferece uma visão simplificada do que acontece quando você vê uma página em um navegador, no seu computador ou telefone.

Essa teoria não é essencial para escrever códigos em curto prazo, mas em pouco tempo você vai se beneficiar ao entender o que está acontecendo em segundo plano.

Clientes e servidores
---------------------

Computadores conectados à web são chamados **clientes** e **servidores**. Um diagrama simplificado de como eles interagem pode ter essa aparência:

![Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client](/pt-BR/docs/Learn/Getting_started_with_the_web/How_the_Web_works/simple-client-server.png)

* Clientes são os típicos dispositivos conectados à internet dos usuários da web (por exemplo, seu computador conectado ao seu Wi-Fi ou seu telefone conectado à sua rede móvel) e programas de acesso à Web disponíveis nesses dispositivos (geralmente um navegador como Firefox ou Chrome).
* Servidores são computadores que armazenam páginas, sites ou aplicativos. Quando o dispositivo de um cliente quer acessar uma página, uma cópia dela é baixada do servidor para a máquina do cliente para ser apresentada no navegador web do usuário.
As outras partes da caixa de ferramentas
----------------------------------------

O cliente e o servidor que descrevemos acima não contam toda a história. Existem muitas outras partes envolvidas, e vamos descrevê-las abaixo.

Por enquanto, vamos imaginar que a web é uma estrada. Em um extremo da estrada, temos o cliente, que é como sua casa. No extremo oposto, temos o servidor, que é como uma loja onde você quer comprar algo.

![](/pt-BR/docs/Learn/Getting_started_with_the_web/How_the_Web_works/road.jpg)

Além do cliente e do servidor, também precisamos dizer oi para:

* **Sua conexão de Internet**: permite que você mande e receba dados na web. É basicamente como a rua entre sua casa e a loja.
* **TCP/IP**: Protocolo de Controle de Transmissão e Protocolo de Internet (*Transmission Control Protocol* e *Internet Protocol*) são protocolos de comunicação que definem como os dados trafegam pela web. São como os mecanismos de transporte que te permitem ir ao shopping, fazer um pedido e comprar seus produtos. Em nosso exemplo, é como um carro ou uma bicicleta (ou qualquer outra coisa que você possa usar).
* **DNS**: Servidor de Nome de Domínio (*Domain Name Servers*) são como um catálogo de endereços para sites. Quando você digita um endereço web no seu navegador, o navegador procura no servidor de DNS para localizar o endereço real do site, antes que ele possa recuperar o site. O navegador precisa encontrar em qual servidor web a página está hospedada para que ele possa mandar mensagens HTTP ao lugar certo (veja abaixo). Isso é como pesquisar o endereço da loja para que você possa entrar em contato.
* **HTTP**: Protocolo de Transferência de Hypertexto (*Hypertext Transfer Protocol*) é um protocolo de aplicação que define uma linguagem para clientes e servidores se comunicarem entre si. É como a linguagem que você usa para encomendar seus produtos.
* **Arquivos componentes**: um website é feito de muitos arquivos diferentes, que são como as diferentes partes dos produtos que você comprou na loja. Esses arquivos são divididos em dois tipos principais:
    + **Arquivos de Código**: os sites são feitos principalmente de HTML, CSS e JavaScript, embora você possa conhecer outras tecnologias mais tarde.
    + **Recursos**: esse é o nome coletivo para todas as outras coisas que compõem um site, como imagens, música, vídeos, documentos do Word e PDFs.
Então, o que acontece, exatamente?
----------------------------------

Quando você digita um endereço da web no seu navegador (pela nossa analogia é como ir andando até a loja):

1. O navegador vai para o servidor de DNS e encontra o endereço verdadeiro de onde o site está hospedado (você encontra o endereço da loja).
2. O navegador manda uma mensagem de requisição HTTP para o servidor, pedindo que envie uma cópia do site ao cliente (você vai até a loja e pede suas mercadorias). Esta mensagem e todos os outros dados enviados entre o cliente e o servidor são enviados pela sua conexão à internet usando TCP/IP.
3. Se o servidor aprovar a requisição do cliente, o servidor enviará ao cliente uma mensagem "200 OK", que significa "Claro que você pode ver esse site! Aqui está" e então começa a enviar os arquivos do site para o navegador como uma série de pequenos pedaços chamados pacotes de dados (a loja dá a você as suas mercadorias e você as traz para sua casa).
4. O navegador monta os pequenos pedaços em um site completo e o mostra a você (as mercadorias chegam à sua porta — novas coisas brilhantes e incríveis!).
DNS explicado
-------------

Endereços web verdadeiros não são sequências de textos boas e fáceis de lembrar que você digita na sua barra de endereços para encontrar seus sites favoritos. Eles são números especiais que se parecem com isso: `63.245.215.20`.

Isso é chamado endereço IP e representa um local único na web. No entanto, não é muito fácil de lembrar, é? É por isso que o Servidor de Nome de Domínio foi inventado. Esses são servidores especiais que relacionam o endereço da web que você digita no seu navegador (como "mozilla.org") com o endereço real do site (IP).

Sites podem ser acessados diretamente pelo seu endereço IP. Você pode encontrar o endereço IP de um site, digitando seu domínio em uma ferramenta como o DNS lookup.

Pacotes explicados
------------------

Anteriormente, usamos o termo "pacotes" para descrever o formato no qual os dados são enviados do servidor para o cliente. O que nós queremos dizer? Basicamente, quando os dados são enviados pela web, eles são enviados como milhares de pequenos blocos, para que muitos usuários diferentes possam baixar o mesmo site ao mesmo tempo. Se os websites fossem enviados como um grande bloco, somente um usuário por vez poderia baixá-los, o que, obviamente, tornaria a web muito ineficiente e não muito divertida de usar.

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

* Como a Internet funciona
* HTTP — uma Aplicação a Nível de Protocolo
* HTTP: Vamos Começar!
* HTTP: Códigos de resposta
Créditos
--------

Foto da rua: Street composing, por Kevin D.

* Anterior
* Menu: Getting started with the web


Elementos construtivos do Javascript - Aprendendo desenvolvimento web

Elementos construtivos do Javascript
====================================

Neste módulo, continuaremos nossa abordagem por todos os recursos-chave fundamentais de Javascript, voltando nossa atenção para os tipos de bloco de código comumente encontrados, tais como declarações condicionais, laços, funções e eventos. Você já viu isso no curso, mas apenas de passagem - aqui nós vamos discutir tudo isso explicitamente.

Pré-requisitos
--------------

Antes de iniciar este módulo, você deve ter familiaridade com os conceitos básicos de HTML e CSS, além de ter estudado nosso módulo anterior, primeiros passos no Javacript.

**Nota:** Se você está trabalhando em um computador, tablet ou outro dispositivo onde você não tem a habilidade para criar seus próprios arquivos, você pode testar os exemplos de código (a maioria deles) em um programa de codificação online, tal como JSBin ou Thimble.

Guias
-----

Tomando decisões em seu código — condicionais

Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo com diferentes valores de entrada. Por exemplo, em um jogo, se o número de vidas de um jogador é 0, então é "fim de jogo". Em um aplicativo de previsão do tempo, se ele está sendo olhado de manhã, é exibido um gráfico de nascer do sol; se for noite, mostra estrelas e a lua. Neste artigo, vamos explorar como as estruturas condicionais funcionam em Javascript.

Re-executando código

Às vezes você precisa que uma tarefa seja feita mais de uma vez em uma linha. Por exemplo, percorrendo uma lista de nomes. Em programação, laços realizam esse trabalho muito bem. Aqui nós vamos ver estruturas de laço em Javascript.

Funções — blocos reutilizáveis de código

Outro conceito essencial em codificação são **funções**. **Funções** permitem que você armazene um trecho de código que executa uma única tarefa dentro de um bloco definido, e então chame aquele código em qualquer lugar que você precise dele usando um comando curto - em vez de ter que digitar o mesmo código múltiplas vezes. Neste artigo, vamos explorar conceitos fundamentais por trás das funções, tais como sintaxe básica, como invocar e definir funções, escopo e parâmetros.

Construa sua própria função

Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece uma experiência prática. Aqui você vai adquirir um pouco de prática construindo sua própria função personalizada. Junto com isso, vamos explicar mais alguns detalhes úteis sobre lidar com funções.

Funções retornam valores

Há um último conceito essencial para discutirmos nesse curso, antes de encerrarmos nossa abordagem sobre funções — valores de retorno. Algumas funções não retornam nenhum valor significativo após executar, outras retornam. É importantes entender o que esses valores são, como utilizá-los em seu código, e como fazer suas próprias funções customizadas retornarem valores utilizáveis.

Introdução a eventos

Eventos são ações ou ocorrências que acontecem no sistema que você está programando, sobre os quais o sistema te informa para que você possa reagir a eles de alguma forma se desejar. Por exemplo se o usuário clica em um botão numa página, você deve querer responder a essa ação exibindo uma caixa de informação. Neste artigo final nós discutiremos alguns conceitos importantes sobre eventos, e ver como eles funcionam em navegadores.

Exercícios
----------

O exercício a seguir irá testar seu entendimento do básico de JavaScript abordado nos guias acima.

Galeria de imagens

Agora que demos uma olhada os elementos construtivos do JavaScript, vamos testar seu conhecimento sobre loops, funções, condicionais e eventos construindo um item bastante comum que você verá em muitos websites — uma galeria de imagens movida a JavaScript.


Solve common problems in your JavaScript code - Aprendendo desenvolvimento web

Solve common problems in your JavaScript code
=============================================

Os links a seguir apontam soluções para problemas comuns do dia a dia, você precisará consertar em ordem para que seu código javascript execute corretamente.

Erros comuns de iniciantes
--------------------------

### Digitação correta and casing

Se o seu código não funciona e/ou se seu navegador indicar que algo está indefinido, verifique se você declarou todas os nomes de suas variáveis, nomes de funções, etc. corretamente.

Algumas funções comuns dos navegadores que causam problema são:

| Correto | Incorreto |
| --- | --- |
| `getElementsByTagName()` | `getElementbyTagName()` |
| `getElementsByName()` | `getElementByName()` |
| `getElementsByClassName()` | `getElementByClassName()` |
| `getElementById()` | `getElementsById()` |

### Posições de ponto e vírgula

Você precisa ter certeza que você não colocou nenhum ponto e vírgula incorretamente. Por exemplo:

| Correct | Wrong |
| --- | --- |
| `elem.style.color = 'red';` | `elem.style.color = 'red;'` |

### Funções

Há uma série de coisas que podem dar errado com funções

Um dos erros mais comuns é declarar a função, mas não chama-la em lugar nenhum. Por exemplo:

```js
function myFunction() {
  alert("This is my function.");
}
```

Este código não fará nada a menos que você o chame, por exemplo com

```js
myFunction();
```

#### Escopo da função

Lembre-se que funções tem seu próprio escopo — você não pode acessar um conjunto de valores de variáveis dentro de uma função fora da função, a não ser que você tenha declarado a variável globalmente (i.e. não dentro de nenhuma função), ou retorne o valor or retorne o valor fora da função

#### Executar o código antes de uma declaração de retorno

Remember also that when you return a value out of a function, the JavaScript interpreter exits the function — no code declared after the return statement will run.

In fact, some browsers (like Firefox) will give you an error message in the developer console if you have code after a return statement. Firefox gives you "unreachable code after return statement".

### Object notation versus normal assignment

When you assign something normally in JavaScript, you use a single equals sign, e.g.:

```js
var myNumber = 0;
```

This doesn't work in Objects, however — with objects you need to separate member names from their values using colons, and separate each member with a comma, for example:

```js
var myObject = {
  name: "Chris",
  age: 38,
};
```

Definições básicas
------------------

* O que é Javascript?
* O que é uma variável?
* O que são strings?
* O que é um vetor?
* O que é um laço?
* O que é uma função?
* O que é um evento?
* O que é um objeto?
* O que é JSON?
* O que é uma web API?
* O que é o DOM?
Casos de uso básicos
--------------------

### Geral

* Como adicionar JavasScript para sua página?
* Como adicionar comentários em um código Javascript?
### Variáveis

* Como você declara uma variável?
* Como você inicializa uma variável com um valor?
* Como você atualiza o valor de uma variável (ver também Operadores de atribuição)
* Quais tipos de dados os valores podem ter em JavaScript?
* O que 'fracamente tipada' significa?
### Matemática

* Quais tipos de números você tem que lidar no desenvolvimento web?
* Como você faz matemática básica em JavaScript?
* Qual a precedência do operador, e como isso é tratado em JavaScript?
* Como você incrementa e decrementa valores em JavaScript?
* Como você compara valores em JavaScript? (por exemplo, para ver qual é o maior, ou para ver se um valor é igual ao outro).
### Strings

* Como você cria uma string em JavaScript?
* Do you have to use single quotes or double quotes?
* How do you escape characters in strings?
* How do you join strings together?
* Can you join strings and numbers together?
* How do you find the length of a string?
* How you find what character is at a certain position in a string?
* How do you find and extract a specific substring from a string?
* How do you change the case of a string?
* How do you replace one specific substring with another?
### Arrays

* How do you create an array?
* How do you access and modify the items in an array? (this includes multidimensional arrays)
* How do you find the length of an array?
* How you add and remove array items?
* How do you split a string into array items, or join array items into a string?
### Debugging JavaScript

* What are the basic types of error?
* What are browser developer tools, and how do you access them?
* How do you log a value to the JavaScript console? (en-US)
* How do you use breakpoints, and other JavaScript debugging features? (en-US)

For more information on JavaScript debugging, see Handling common JavaScript problems (en-US); also see Other common errors for a description of common errors.

### Making decisions in code

* How do you execute different blocks of code, depending on a variable's value or other condition?
* How do you use if ...else statements?
* How do nest one decision block inside another?
* How do you use AND, OR, and NOT operators in JavaScript?
* How do you conveniently handle a large number of choices for one condition?
* How do you use a ternary operator to make a quick choice between two options based on a true or false test?
### Looping/iteration

* How do you run the same bit of code over and over again?
* How do you exit a loop before the end if a certain condition is met?
* How do you skip to the next iteration of a loop if a certain condition is met?
* How do you use while and do ... while loops?
* How to iterate over the elements in an array
* How to iterate over the elements in a multidimensional array
* How to iterate over the members in an object
* How to iterate over the members of an object nested inside an array
Intermediate use cases
----------------------

### Functions

* How do you find functions in the browser?
* What is the difference between a function and a method?
* How do you create your own functions?
* How do you run (call, or invoke) a function?
* What is an anonymous function?
* How do you specify parameters (or arguments) when invoking a function?
* What is function scope?
* What are return values, and how do you use them?
### Objects

* How do you create an object?
* What is dot notation?
* What is bracket notation?
* How do you get and set the methods and properties of an object?
* What is `this`, in the context of an object?
* What is object-oriented programming?
* What are constructors and instances, and how do you create them?
* What different ways are there to create objects in JavaScript?
### JSON

* How do you structure JSON data, and read it from JavaScript?
* How can you load a JSON file into a page?
* How do you convert a JSON object to a text string, and back again?
### Eventos

* What are event handlers and how do you use them?
* What are inline event handlers?
* What does the `addEventListener()` function do, and how do you use it?
* Which mechanism should I use to add event code to my web pages?
* What are event objects, and how do you use them?
* How do you prevent default event behaviour?
* How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)
* What is event delegation, and how does it work?
### Javascript Orientado a objetos

* Quais são protótipos de objetos?
* Qual é a propriedade do construtor, e como você pode usa-la?
* Como você adiciona métodos para o construtor?
* Como você cria um novo constructor que herda os membros do construtor pai?
* Quando você deve usar herança em Javascript?
### Web APIs

* Como você manipula o DOM (por exemplo, adicionando e removendo elementos) usando Javascript?


JavaScript Assíncrono - Aprendendo desenvolvimento web

JavaScript Assíncrono
=====================

Neste módulo vamos entender JavaScript Assíncrono, porque isso é importante e como pode ser usado para lidar com operações potencialmente bloqueantes, como a busca de recursos em um servidor remoto.Pre requisitos
--------------

Javascript Assíncrono é um tópico razoavelmente avançado e é aconselhada a leitura dos módulos Primeiros Passos com Javascript e Elementos construtivos do Javascript antes de continuar.

Se você não estiver familiarizado com os conceitos de programação assíncrona, a sugestão é iniciar com o artigo Conceitos gerais da programação assíncrona desse módulo. Caso contrário, você pode provavelmente pular para o módulo Introdução ao Javascript Assíncrono.

**Nota:** Se você está estudando a partir de um computador/tablet/ outro dispositivo onde não é capaz de criar seus próprios arquivos, é possível executar os códigos de exemplo (a maioria deles) em plataformas como JSBin ou Thimble.

Guias
-----

Conceitos gerais da programação assíncrona

Nesse artigo vamos explorar um número de conceitos importantes relacionados à programação assíncrona e como aparece nos browsers Web. Você deve entender estes conceitos antes de seguir adiante através dos outros artigos neste módulo.

Introdução ao Javascript Assíncrono

Nesse artigo vamos recapitular brevemente os problemas associados ao Javascript síncrono e introduzir algumas das diferentes técnicas do Javascript assícrono que irá encontrar mais a frente, mostrando como essas técnicas podem nos ajudar a resolver tais problemas.

Javascript assícrono cooperativo: Timeouts e intervalos

Aqui contemplamos os métodos tradicionais que o Javascript possui disponível para executar código de forma assíncrona após decorrido um certo periodo de tempo ou em um intervalo regular (e.g. um determinado número de vezes por segundo), discutir sua utilidade e perceber alguns problemas inerentes a eles.

Manipulando elegantemente operações assíncronas com Promises

Promises são um novo recurso da linguagem Javascript que permitem adiar ações até que a ação anterior esteja concluída ou responder com falha. Isso é extremamente útil para montar uma sequência de operações para que funcione corretamente. Este artigo lhe orienta como as Promises funcionam, onde verá elas sendo utilizadas em WebAPIs (en-US). Também aprenderá como escrever suas próprias promises.

Facilitando a programação assícrona com async e await

Promises podem ser um pouco complexas de construir e entender. Por esse motivo, os navegadores modernos implementado funções `async` e o operador `await`. O primeiro permite que funções padrão se comportem implicitamente de forma assíncrona com promises, enquanto que o último pode ser usado dentro de funções `async` para esperar por 'promessas' antes que a função continue. Isso faz com que o encadeamento de 'promessas' seja mais fácil de ler.

Escolhendo a abordagem correta

Para concluir este módulo, vamos considerar as diferentes técnicas de programação e as features que abordamos do começo ao fim, considerando quais e quando utilizar, com recomendações e advertências das armadilhas mais comuns.

Veja Também
-----------

* Programação Assícrona do livro online Eloquent JavaScript, por Marijn Haverbeke.

**Nota:** **Nota do tradutor**: A segunda edição do *Eloquent Javascript* foi traduzida pela comunidade brasileira do Javascript e está disponível em Javascript Eloquente - 2ª Edição. Até o momento da tradução deste artigo, a comunidade está trabalhando na conclusão da 3ª edição.


Introdução a objetos em Javascript - Aprendendo desenvolvimento web

Introdução a objetos em Javascript
==================================

Em JavaScript, a maioria das coisas são objetos, desde os principais recursos do JavaScript, como arrays, até o navegador APIs construído sobre o JavaScript. Você pode até mesmo criar seus próprios objetos para encapsular funções e variáveis relacionadas em pacotes eficientes e atuar como contêineres de dados úteis. É importante entender a natureza baseada em objetos do JavaScript se você quiser aprofundar seu conhecimento da linguagem, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, depois veremos como criar seus próprios objetos.

#### Quer se tornar um desenvolvedor web front-end?

 Reunimos um curso que inclui todas as informações essenciais que você precisa para
 trabalhe em direção ao seu objetivo.

**Primeiros passos**

Pré-requisitos
--------------

Antes de iniciar este módulo, você deve ter alguma familiaridade com HTML e CSS. Recomendamos que você trabalhe nos módulos Introduction to HTML e Introduction to CSS antes de começar JavaScript.

Você também deve ter alguma familiaridade com os fundamentos do JavaScript antes de examinar os objetos JavaScript em detalhes. Antes de tentar este módulo, trabalhe nas primeiras etapas do JavaScript e nos blocos de construção do JavaScript.

**Nota:** Se você estiver trabalhando em um computador/tablet/outros dispositivos nos quais não é possível criar seus próprios arquivos, experimente (a maioria) os exemplos de código em um programa de codificação on-line, como JSBin ou Glitch.

Guias
-----

Noções básicas de objetos

No primeiro artigo sobre objetos JavaScript, veremos a sintaxe fundamental do objeto JavaScript e revisitaremos alguns recursos JavaScript que já examinamos anteriormente no curso, reiterando o fato de que muitos dos recursos que você já tratados são de fato objetos.

Protótipos de objetos

Protótipos são o mecanismo pelo qual os objetos JavaScript herdam recursos uns dos outros e funcionam de maneira diferente dos mecanismos de herança em linguagens de programação clássicas orientadas a objetos. Neste artigo, exploramos como funcionam as cadeias de protótipos.

Programação orientada a objetos (en-US)

Neste artigo, descreveremos alguns dos princípios básicos da programação orientada a objetos "clássica" e veremos como ela é diferente do modelo de protótipo em JavaScript.

Aulas em JavaScript

JavaScript fornece alguns recursos para pessoas que desejam implementar programas orientados a objetos "clássicos" e, neste artigo, descreveremos esses recursos.

Trabalhando com dados JSON

JavaScript Object Notation (JSON) é um formato padrão baseado em texto para representar dados estruturados com base na sintaxe de objeto JavaScript, que é comumente usado para representar e transmitir dados na web (ou seja, enviar alguns dados do servidor para o cliente, para que possa ser exibido em uma página da web). Você o encontrará com bastante frequência, portanto, neste artigo, fornecemos tudo o que você precisa para trabalhar com JSON usando JavaScript, incluindo a análise do JSON para que você possa acessar itens de dados dentro dele e escrever seu próprio JSON.

Prática de construção de objetos

Em artigos anteriores, examinamos toda a teoria essencial de objetos JavaScript e detalhes de sintaxe, fornecendo uma base sólida para começar. Neste artigo, mergulhamos em um exercício prático, dando a você um pouco mais de prática na construção de objetos JavaScript personalizados, que produzem algo divertido e colorido — algumas bolas saltitantes coloridas.

Avaliações
----------

Adicionando recursos à nossa demonstração de bolas quicando

Nesta avaliação, espera-se que você use a demonstração de bolas saltitantes do artigo anterior como ponto de partida e adicione alguns recursos novos e interessantes a ela.

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

Aprenda JavaScript

Um excelente recurso para aspirantes a desenvolvedores web — Aprenda JavaScript em um ambiente interativo, com lições curtas e testes interativos, guiados por avaliações automatizadas. As primeiras 40 aulas são gratuitas e o curso completo está disponível por um pequeno pagamento único.


APIs web do lado cliente - Aprendendo desenvolvimento web

APIs web do lado cliente
========================

Se você decidir usar JavaScript no lado do cliente para sites ou aplicativos, você rapidamente vai se deparar com as **APIs** - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou mesmo dados de outros sites ou serviços. Neste módulo, descobriremos o que são APIs, e como usar algumas das APIs mais comuns, que serão úteis no seu trabalho de desenvolvimento.

Pré-requisitos
--------------

Para tirar o máximo proveito deste módulo, é recomendável a leitura dos módulos anteriores de JavaScript da série (Primeiros passos, Construindo blocos, e Objetos javaScript). Esses módulos envolvem bastante uso de API simples, e não é facil escrever exemplos Javascript do lado do cliente sem eles. Aqui, subimos um nível, assumindo o conhecimento da linguagem core JavaScript e explorando as APIs comuns da Web com um pouco mais de detalhes.

Conhecimento básico de HTML e CSS serão utéis.

**Nota:** **Notes** Se você estiver trabalhando de um dispositivo que não permita a criação de arquivos. Você pode tentar editar os arquivos em um editor online como JSBin ou Thimble.

Guias
-----

Introdução a APIs para a web

Primeiro, vamos começar com apis de alto nível — o que elas são, como elas funcionam, quando usar no seu código, como elas são estruturadas? Nós veremos diferentes tipos de classses principais e o que elas são, e quais são as possibilidades de uso.

Manipulando documentos

Quando estiver codificando páginas da web ou aplicações, uma das coisas mais comuns que você irá fazer será manipular documentos da web de alguma forma. Normalmente isso é feito usando o Document Object Model (DOM), um conjunto de APIs para controlar o HTML e a informação sobre os estilos que usa fortemente o objeto `Document`. Neste artigo vamos ver como usar o DOM em detalhes, juntamente com outras APIs interessantes que podem alterar seu ambiente de desenvolvimento de modos interessantes.

Buscando dados do servidor

Outra tarefa muito comum em websites modernos e aplicações é recuperar dados individuais de um servidor para atualizar partes de uma página sem ter que recarregar uma página inteira novamente. Este aparentemente pequeno detalhe tem tido um impacto enorme sobre o desempenho e comportamento de websites, desse modo neste artigo, vamos explicar esse conceito, e observar as tecnologias que tornam isso possível, tais como `XMLHttpRequest` e o Fetch API.

Third party APIs (en-US)

The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.

Drawing graphics (en-US)

The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (SVG) language, to APIs for drawing on HTML `<canvas>` elements, (see The Canvas API and WebGL). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.

Video and audio APIs (en-US)

HTML5 comes with elements for embedding rich media in documents — `<video>` and `<audio>` — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.

Client-side storage

Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.


Primeiros passos com JavaScript - Aprendendo desenvolvimento web

Primeiros passos com JavaScript
===============================

Em nosso primeiro módulo de JavaScript, vamos responder algumas questões fundamentais como "o que é JavaScript?", "com o que se parece?", e "o que ele pode fazer?", antes de levá-lo a sua primeira experiência em escrever JavaScript. Depois disso, vamos discutir em detalhes algumas peças chaves, como variáveis, cadeias de caracteres (*strings*), números (*numbers*) e matrizes (*arrays*).

Pré-requisitos
--------------

Antes de iniciar esse módulo, você não precisa de nenhum conhecimento prévio de JavaScript, mas você deve ter alguma familiaridade com HTML e CSS. Te recomendamos a estudar os seguintes módulos antes de começar com o JavaScript:

* Iniciando com a Web (o que inclui uma introdução rápida ao JavaScript)
* Introdução ao HTML
* Introdução ao CSS

**Nota:** Se você está trabalhando em um computador/tablet/outro dispositivo onde você não pode criar os seus próprio arquivos, você pode experimentar (em sua maioria) os códigos de exemplo em um programa de codificação online como JSBin ou Thimble.

Guias
-----

O que é JavaScript?

Bem vindo ao curso para iniciantes em JavaScript do MDN! No primeiro artigo nós visualizaremos o JavaScript de uma perspectiva de alto nível, respondendo a questões como "o que é?" e "o que ele pode fazer?", permitindo-lhe entender confortavelmente o objetivo do JavaScript.

Um primeiro mergulho no JavaScript

Agora que você tem uma noção teórica do JavaScript e o que você pode fazer com ele, nós vamos lhe dar um curso intensivo sobre as funcionalidades básicas do JavaScript através de um tutorial completamente prático. Aqui você ira construir, passo a passo, um jogo simples de "Advinhe o número".

O que deu errado? Solucionando problemas em JavaScript

Quando você construiu o jogo "Adivinhe o número" no artigo anterior, talvez tenha notado que ele não funcionou. Nunca tema — este artigo visa preservá-lo de ter que arrancar seus cabelos devido a esses problemas por prover-lhe alguns exemplos simples de como consertar erros em programas JavaScript.

Armazenando a informação necessária — Variáveis

Após ler os últimos artigos, você agora deve saber o que é o JavaScript, o que ele pode fazer para você, como usa-lo junto a com outras tecnologias web, e como sua funcionalidade principal se parece de um alto nível. Nesse artigo nós vamos ver o que é realmente básico, vendo como trabalhar com os mais básicos blocos de construção do JavaScript — Variáveis.

Matemática básica com JavaScript — números e operadores

Nesse ponto do curso nós iremos discutir matemática no JavaScript — como nós combinamos operadores e outras funcionalidades para manipular números para fazer nosso comando.

Manuseando textos — cadeia de caracteres (strings) em JavaScript

Em seguida nós colocaremos nossa atenção em strings — isso é como pedaços de texto são chamados na programação. Nesse artigos nós vamos ver todas as coisas comuns que você realmente deve saber sobre strings quando estiver aprendendo JavaScript, como criar strings, manusear aspas nas strings, e juntando elas.

Métodos úteis sobre cadeias de caracteres (strings)

Agora nós vemos o mais básico sobre strings, vamos começar a pensar sobre quais operações úteis nós podemos fazer com elas com os metótos internos, como por exemplos encontrar o tamanho do texto em uma strings, juntar e separar strings, substrituir um caractere de uma string e mais.

Matrizes

No artigo final desse módulo, nós iremos ver matrizes (arrays) — um jeito fácil de armazenar lista de dados em apenas um nome de variável. Aqui nós veremos o por quê disso ser útil, então exploraremos como criar uma matriz, retornar seus dados, adicionar e remover itens armazenas em um array, e mais além disso.

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

A avaliação seguinte vai testar o que você entendeu sobre o básico de JavaScript coberto pelos guias acima.

Gerador de histórias bobas

Nessa avaliação você será a desafiado a usar seu conhecimento adquirido nesse módulo e aplicará criando um divertido aplicativo que gerará histórias bobas aleatórias. Divirta-se.


Como usar Promises - Aprendendo desenvolvimento web

Como usar Promises
==================

* Anterior
* Menu: Asynchronous
* Próxima

**Promises** são a base da programação assíncrona moderna em JavaScript. Uma promise é um objeto retornado por uma função assíncrona, que representa o estado atual da operação. No momento em que a promise é retornada para quem à chamou, a operação muitas vezes ainda não foi finalizada, mas o objeto da promise oferece métodos para tratar o possível sucesso ou falha da operação.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimentos básicos em informática, um básico entendimento do
 JavaScript e seus fundamentos.
  |
| Objetivo: | Entender promises e como elas funcionam. |

No último artigo falamos sobre o uso de callbacks para implementar funções assíncronas. Com esse design, você chama a função assíncrona, passando sua função de callback como parâmetro. A função executa imediatamente e chama seu callback quando a operação é finalizada.

Com uma API baseada em promises, a função assíncrona inicia a operação e retorna o objeto `Promise`. Você pode então anexar manipuladores nesse objeto, e esses manipuladores vão ser executados quando a operação tiver sucesso ou falhar.

Usando a API fetch()
--------------------

**Nota:** Neste artigo, vamos explorar promises copiando exemplos de código desta página dentro do console Javascript do seu navegador. Para configurar isso:

1. abra o navegador e visite https://example.org
2. nesta aba, abra o console Javascript nas ferramentas de desenvolvimento do navegador
3. quando mostrarmos um exemplo, copie-o dentro do console. Você vai ter que recarregar a página cada vez que você começar um novo exemplo, caso contrário o console irá reclamar que você redeclarou a função `fetchPromise`.

Neste exemplo, vamos baixar o seguinte arquivo JSON https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json e registrar algumas informações sobre ele.

Para isso, vamos fazer uma **Requisição HTTP** para o servidor. Em uma requisição HTTP, enviamos uma solicitação para o servidor e ele nos envia uma resposta de volta. Neste caso, vamos enviar uma solicitação para obter um arquivo JSON do servidor. Relembre o último artigo, onde fizamos requisições HTTP usando a API `XMLHttpRequest`? Bem, neste artigo, usaremos a API `fetch()`, que é a substituição moderna baseada em promise para XMLHttpRequest.

Cole o seguinte código no console do seu navegador:

```js
const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

console.log(fetchPromise);

fetchPromise.then((resposta) => {
  console.log(`Resposta recebida: ${resposta.status}`);
});

console.log("Requisição iniciada…");
```

Aqui estamos:

1. chamando a API `fetch()`, e atribuindo o valor de retorno a variável `fetchPromise`.
2. imediatamente depois, exibimos no console a variável `fetchPromise`. Você deve ver algo parecido com: `Promise { <state>: "pending" }`, nos dizendo que temos um objeto `Promise`, ele tem uma propriedade `state` cujo valor no momento em que foi impresso é `"pending"` (`"pendente"`). O estado `"pending"` significa que a busca pela resposta ainda está ocorrendo.
3. passando uma função manipuladora dentro do método da Promise **`then()`**. Quando (e se) a operação de busca tiver exito a Promise vai chamar a função manipuladora, passando um objeto `Response`, que contém a resposta do servidor.
4. imprimindo um log dizendo que iniciamos a requisição.

A saída completa deve ser algo parecido com:
```

Promise { <state>: "pending" }
Requisição iniciada…
Resposta recebida: 200
```

Note que `Requisição iniciada…` foi exibido antes de recebermos a resposta. Diferente de uma função síncrona, `fetch()` retorna enquanto a requisição ainda está ocorrendo, permitindo que nosso programa permaneça ágil. A resposta mostra o status code `200` (OK), que significa que nossa requisição obteve sucesso.

Esse exemplo provavelmente se parece muito com o exemplo do último artigo, onde adicionamos manipuladores de eventos ao objeto `XMLHttpRequest`. Em vez disso, passamos um manipulador dentro do método `then()` da promise retornada.

Encadeamento de promises
------------------------

Com a API `fetch()`, depois de obter um objeto `Response`, você precisa chamar outra função para obter os dados de resposta. Neste caso, queremos obter os dados de resposta como JSON, então chamaríamos o método `json()` (en-US) do objeto `Response`. Acontece que `json()` também é assíncrono. Portanto, este é um caso em que temos que chamar duas funções assíncronas sucessivas.

Tente isso:

```js
const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

fetchPromise.then((response) => {
  const jsonPromise = response.json();
  jsonPromise.then((data) => {
    console.log(data[0].name);
  });
});
```

Neste exemplo, como antes, adicionamos um manipulador `then()` à promise retornada por `fetch()`. Mas desta vez, nosso manipulador chama `response.json()`, e então passa um novo manipulador `then()` para a promise retornada por `response.json()`.

Isso deve registrar "baked beans" (o nome do primeiro produto listado em "products.json").

Mas espere! Lembra do último artigo, onde dissemos que ao chamar um callback dentro de outro callback, obtínhamos sucessivamente mais níveis de código aninhados? E dissemos que esse "inferno de callback" tornava nosso código difícil de entender? Isso não é exatamente o mesmo, apenas com chamadas `then()`?

Sim, claro. Mas a característica elegante das promises é que o próprio *`then()` retorna uma promise, que será completada com o resultado da função passada para ela*. Isso significa que podemos (e certamente devemos) reescrever o código acima assim:

```js
const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

fetchPromise
  .then((response) => response.json())
  .then((data) => {
    console.log(data[0].name);
  });
```

Em vez de chamar o segundo `then()` dentro do manipulador para o primeiro `then()`, podemos *retornar* a promise retornada por `json()` e chamar o segundo `then()` nesse valor de retorno. Isso é chamado de **encadeamento de promises** e significa que podemos evitar níveis cada vez maiores de indentação quando precisamos fazer chamadas de função assíncronas consecutivas.

Antes de passarmos para a próxima etapa, há mais uma peça a ser adicionada. Precisamos verificar se o servidor aceitou e foi capaz de lidar com a solicitação antes de tentarmos lê-la. Faremos isso verificando o código de status na resposta e lançando um erro se não estiver "OK":

```js
const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

fetchPromise
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log(data[0].name);
  });
```

Capturando errors
-----------------

Isso nos leva à última parte: como lidamos com os erros? A API `fetch()` pode lançar um erro por vários motivos (por exemplo, porque não havia conectividade de rede ou a URL estava malformada de alguma forma) e estamos lançando um erro nós mesmos se o servidor retornar um erro.

No último artigo, vimos que o tratamento de erros pode ser muito difícil com callbacks aninhados, fazendo com que tratemos erros em todos os níveis de aninhamento.

Para suportar o tratamento de erros, os objetos `Promise` fornecem um método `catch()`. Que é muito parecido com `then()`: você chama e passa uma função manipuladora. No entanto, enquanto o manipulador passado para `then()` é chamado quando a operação assíncrona *é bem-sucedida*, a função manipuladora passado para `catch()` é chamado quando a operação assíncrona *falha*.

Se você adicionar `catch()` ao final de uma cadeia de promises, ela será chamada quando qualquer uma das chamadas de função assíncrona falhar. Assim, você pode implementar uma operação como várias chamadas de função assíncronas consecutivas e ter um único local para lidar com todos os erros.

Experimente esta versão do nosso código `fetch()`. Adicionamos um manipulador de erros usando `catch()` e também modificamos a URL para que a solicitação falhe.

```js
const fetchPromise = fetch(
  "bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

fetchPromise
  .then((resposta) => {
    if (!resposta.ok) {
      throw new Error(`HTTP error: ${resposta.status}`);
    }
    return resposta.json();
  })
  .then((data) => {
    console.log(data[0].name);
  })
  .catch((error) => {
    console.error(`Não foi possível obter os produtos: ${error}`);
  });
```

Tente executar esta versão: você deve ver o erro registrado pelo manipulador passado para `catch()`.

Terminologia da promise
-----------------------

As promises vêm com uma terminologia bastante específica sobre a qual vale a pena esclarecer.

Primeiro, uma promise pode estar em um dos três estados:

* **pending**: a promise foi criada e a função assíncrona à qual está associada não foi concluída com sucesso ou falhou ainda. Este é o estado em que sua promise está quando é retornada de uma chamada para `fetch()`, e a solicitação ainda está sendo feita.
* **fulfilled**: a função assíncrona foi concluída com sucesso. Quando uma promise é *fulfilled*, seu manipulador `then()` é chamado.
* **rejected**: a função assíncrona falhou. Quando uma promise é *rejected*, seu manipulador `catch()` é chamado.

Observe que o significado de "sucesso" ou "falha" aqui depende da API em questão: por exemplo, `fetch()` considera uma solicitação que foi concluída com sucesso se o servidor retornar um erro como 404 Not Found, mas não se um erro de rede impediu o envio da solicitação.

Às vezes, usamos o termo **settled** para cobrir tanto **fulfilled** quanto **rejected**.

Uma promise é **resolved** se for resolvida ou se tiver sido "bloqueada" para seguir o estado de outra promise.

O artigo Let's talk about how to talk about promises dá uma ótima explicação dos detalhes desta terminologia.

Combinando múltiplas promises
-----------------------------

A cadeia de promises é o que você precisa quando sua operação consiste em várias funções assíncronas e você precisa que cada uma seja concluída antes de iniciar a próxima. Mas existem outras maneiras de combinar chamadas de funções assíncronas, e a API `Promise` fornece alguns auxiliares para elas.

Às vezes, você precisa que todas as promises sejam cumpridas, mas elas não dependem umas das outras. Em um caso como esse, é muito mais eficiente iniciá-los todos juntos e ser notificado quando todos forem cumpridos. O método `Promise.all()` é o que você precisa aqui. Recebe um array de promises e retorna uma única promise.

A promise retornada por `Promise.all()` é:

* **fulfilled** quando e se *todas* as promises no array forem cumpridas. Nesse caso, o manipulador `then()` é chamado com uma matriz de todas as respostas, na mesma ordem em que as promises foram passadas para `all()`.
* **rejected** quando e se *qualquer* uma das promises no array for rejeitada. Neste caso, o manipulador `catch()` é chamado com o erro lançado pela promise rejeitada.

Por exemplo:

```js
const fetchPromise1 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
const fetchPromise2 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
);
const fetchPromise3 = fetch(
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
);

Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
  .then((responses) => {
    for (const response of responses) {
      console.log(`${response.url}: ${response.status}`);
    }
  })
  .catch((error) => {
    console.error(`Falha ao buscar: ${error}`);
  });
```

Aqui, estamos fazendo três requisições `fetch()` para três URLs diferentes. Se todas forem concluídas com sucesso, vamos imprimir no console o status da resposta de cada uma. Se qualquer uma falhar, imprimiremos o objeto de erro capturado por `.catch()`.

Com as URLs que fornecemos, todos as requisições devem ser conluídas com sucesso, embora para a segunda, o servidor retornará `404` (Not Found) em vez de `200` (OK) porque o arquivo solicitado não existe. Então a saída deve ser:
```

https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json: 200
https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found: 404
https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json: 200
```

Se tentarmos o mesmo código com uma URL mal formada, assim:

```js
const fetchPromise1 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
const fetchPromise2 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
);
const fetchPromise3 = fetch(
  "bad-scheme://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
);

Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
  .then((responses) => {
    for (const response of responses) {
      console.log(`${response.url}: ${response.status}`);
    }
  })
  .catch((error) => {
    console.error(`Falha ao buscar: ${error}`);
  });
```

Então podemos esperar que o manipulador `catch()` seja executado, e devemos ver algo como:
```

Failed to fetch: TypeError: Failed to fetch
```

Às vezes, você pode precisar de qualquer uma de um conjunto de promises a serem cumpridas e não se importa com qual delas. Nesse caso, você deseja `Promise.any()` (en-US). Isso é como `Promise.all()`, exceto que é concluída com sucesso assim que qualquer uma das promises for concluída com sucesso, ou rejeitada se todas forem rejeitadas:

```js
const fetchPromise1 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
const fetchPromise2 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
);
const fetchPromise3 = fetch(
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
);

Promise.any([fetchPromise1, fetchPromise2, fetchPromise3])
  .then((response) => {
    console.log(`${response.url}: ${response.status}`);
  })
  .catch((error) => {
    console.error(`Falha ao buscar: ${error}`);
  });
```

Observe que, nesse caso, não podemos prever qual solicitação de busca será concluída primeiro.

Estas são apenas duas das funções extras `Promise` para combinar várias promises. Para saber mais sobre o restante, consulte a documentação de referência `Promise`.

async e await
-------------

A palavra-chave `async` oferece uma maneira mais simples de trabalhar com código assíncrono baseado em promise. Adicionar `async` no início de uma função a torna uma função assíncrona:

```js
async function myFunction() {
  // Esta é uma função assíncrona
}
```

Dentro de uma função assíncrona, você pode usar a palavra-chave `await` antes de uma chamada para uma função que retorna uma promise. Isso faz com que o código espere nesse ponto até que a promise seja liquidada, ponto em que o valor cumprido da promise é tratado como um valor de retorno ou o valor rejeitado é lançado.

Isso permite que você escreva código que usa funções assíncronas, mas se parece com código síncrono. Por exemplo, poderíamos usá-lo para reescrever nosso exemplo de busca:

```js
async function fetchProducts() {
  try {
    // após esta linha, nossa função irá esperar que a chamada `fetch()` seja resolvida
    // a chamada `fetch()` retornará uma resposta ou lançará um erro
    const response = await fetch(
      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
    );
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    // após esta linha, nossa função irá esperar que a chamada `response.json()` seja resolvida
    // a chamada `response.json()` retornará o objeto JSON processado ou gerará um erro
    const data = await response.json();
    console.log(data[0].name);
  } catch (error) {
    console.error(`Não foi possível obter os produtos: ${error}`);
  }
}

fetchProducts();
```

Aqui, estamos chamando `await fetch()`, e ao invés de obter uma `Promise`, nosso chamador recebe de volta um objeto `Response` totalmente completo, como se `fetch()` fosse uma função síncrona!

Podemos até usar um bloco `try...catch` para tratamento de erros, exatamente como faríamos se o código fosse síncrono.

Observe, porém, que as funções assíncronas sempre retornam uma promise, então você não pode fazer algo como:

```js
async function fetchProducts() {
  try {
    const response = await fetch(
      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
    );
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(`Não foi possível obter os produtos: ${error}`);
  }
}
const promise = fetchProducts();
console.log(promise[0].name); // "promise" é um objeto Promise, então isso não funcionará
```

Em vez disso, você precisaria fazer algo como:

```js
async function fetchProducts() {
  try {
    const response = await fetch(
      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
    );
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(`Não foi possível obter os produtos: ${error}`);
  }
}

const promise = fetchProducts();
promise.then((data) => console.log(data[0].name));
```

Além disso, observe que você só pode usar `await` dentro de uma função `async`, a menos que seu código esteja em um módulo JavaScript. Isso significa que você não pode fazer isso em um script normal:

```js
try {
  // usar await fora de uma função assíncrona só é permitido em um módulo
  const response = await fetch(
    "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
  );
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
  const data = await response.json();
  console.log(data[0].name);
} catch (error) {
  console.error(`Could not get products: ${error}`);
}
```

Você provavelmente usará muito funções `async` onde você poderia usar cadeias de promises, e elas tornam o trabalho com promises muito mais intuitivo.

Lembre-se de que, assim como uma cadeia de promises, `await` força operações assíncronas a serem concluídas em série. Isso é necessário se o resultado da próxima operação depender do resultado da última, mas se esse não for o caso, algo como `Promise.all()` terá melhor desempenho.

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

As promises são a base da programação assíncrona no JavaScript moderno. Eles tornam mais fácil expressar e raciocinar sobre sequências de operações assíncronas sem retornos de chamada profundamente aninhados e suportam um estilo de tratamento de erros semelhante à instrução síncrona `try...catch`.

As palavras-chave `async` e `await` facilitam a criação de uma operação a partir de uma série de chamadas de função assíncronas consecutivas, evitando a necessidade de criar cadeias de promises explícitas e permitindo que você escreva um código que se pareça com o código síncrono.

As promises funcionam nas versões mais recentes de todos os navegadores modernos; o único lugar onde o suporte de promise será um problema é no Opera Mini e IE11 e versões anteriores.

Não abordamos todos os recursos das promises neste artigo, apenas os mais interessantes e úteis. Ao começar a aprender mais sobre promises, você encontrará mais recursos e técnicas.

Muitas APIs da Web modernas são baseadas em promises, incluindo WebRTC, Web Audio API, Media Capture and Streams API (en-US) e muito mais.

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

* `Promise()`
* Using promises
* We have a problem with promises by Nolan Lawson
* Let's talk about how to talk about promises
* Anterior
* Menu: Asynchronous
* Próxima  (en-US)


Introdução ao JavaScript Async - Aprendendo desenvolvimento web

Introdução ao JavaScript Async
==============================

* Menu: Asynchronous
* Próxima

Neste artigo, explicaremos o que é programação assíncrona, por que precisamos dela e discutiremos brevemente algumas das maneiras pelas quais as funções assíncronas foram implementadas historicamente em JavaScript.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento básico de informática, uma compreensão razoável de fundamentos de
 JavaScript, incluindo funções e manipuladores de eventos.
  |
| Objetivo: | Para se familiarizar com o que é JavaScript assíncrono, como ele difere do JavaScript síncrono e por que precisamos dele. |

A programação assíncrona é uma técnica que permite que seu programa inicie uma tarefa potencialmente de longa duração e ainda seja capaz de responder a outros eventos enquanto essa tarefa é executada, em vez de ter que esperar até que essa tarefa seja concluída. Uma vez que essa tarefa tenha terminado, seu programa é apresentado com o resultado.

Muitas funções fornecidas pelos navegadores, especialmente as mais interessantes, podem levar muito tempo e, portanto, são assíncronas. Por exemplo:

* Fazendo solicitações HTTP usando `fetch()`
* Acessar a câmera ou o microfone de um usuário usando `getUserMedia()` (en-US)
* Pedindo a um usuário para selecionar arquivos usando `showOpenFilePicker()` (en-US)

Portanto, mesmo que você não precise *implementar* suas próprias funções assíncronas com muita frequência, é muito provável que você precise *usá-las* corretamente.

Neste artigo, começaremos analisando o problema com funções síncronas de longa duração, que tornam a programação assíncrona uma necessidade.

Programação síncrona
--------------------

Considere o seguinte código:

```js
const name = "Miriam";
const greeting = `Hello, my name is ${name}!`;
console.log(greeting);
// "Hello, my name is Miriam!"
```

Este código:

1. Declara uma string chamada `name`.
2. Declara outra string chamada `greeting`, que usa `name`.
3. Emite a saudação para o console JavaScript.

Devemos observar aqui que o navegador efetivamente percorre o programa uma linha de cada vez, na ordem em que o escrevemos. Em cada ponto, o navegador espera que a linha termine seu trabalho antes de seguir para a próxima linha. Tem que fazer isso porque cada linha depende do trabalho feito nas linhas anteriores.

Isso torna este um **programa síncrono**. Ainda seria síncrono mesmo se chamássemos uma função separada, como esta:

```js
function makeGreeting(name) {
  return `Hello, my name is ${name}!`;
}

const name = "Miriam";
const greeting = makeGreeting(name);
console.log(greeting);
// "Hello, my name is Miriam!"
```

Aqui, `makeGreeting()` é uma **função síncrona** porque o chamador precisa esperar que a função termine seu trabalho e retorne um valor antes que o chamador possa continuar.

### Uma função síncrona de longa duração

E se a função síncrona demorar muito?

O programa abaixo usa um algoritmo muito ineficiente para gerar vários números primos grandes quando um usuário clica no botão "Gerar primos". Quanto maior o número de primos que um usuário especificar, mais tempo a operação levará.

```html
<label for="quota">Número de primos:</label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Gerar primos</button>
<button id="reload">Recarregar</button>

<div id="output"></div>
```

```js
const MAX\_PRIME = 1000000;

function isPrime(n) {
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) {
      return false;
    }
  }
  return n > 1;
}

const random = (max) => Math.floor(Math.random() \* max);

function generatePrimes(quota) {
  const primes = [];
  while (primes.length < quota) {
    const candidate = random(MAX\_PRIME);
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }
  return primes;
}

const quota = document.querySelector("#quota");
const output = document.querySelector("#output");

document.querySelector("#generate").addEventListener("click", () => {
  const primes = generatePrimes(quota.value);
  output.textContent = `Finished generating ${quota.value} primes!`;
});

document.querySelector("#reload").addEventListener("click", () => {
  document.location.reload();
});
```

Tente clicar em "Gerar primos". Dependendo da velocidade do seu computador, provavelmente levará alguns segundos até que o programa exiba a mensagem "Concluído!" mensagem.

### O problema com funções síncronas de longa duração

O próximo exemplo é igual ao anterior, exceto que adicionamos uma caixa de texto para você digitar. Desta vez, clique em "Gerar números primos" e tente digitar na caixa de texto imediatamente depois.

Você verá que enquanto nossa função `generatePrimes()` está sendo executado, nosso programa não responde: você não pode digitar nada, clicar em nada ou fazer qualquer outra coisa.
```

<label for="quota">Number of primes:</label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Gerar primos</button>
<button id="reload">Recarregar</button>

<textarea id="user-input" rows="5" cols="62">
Tente digitar aqui imediatamente após pressionar "Gerar primos"
</textarea>

<div id="output"></div>
```

```
textarea {
  display: block;
  margin: 1rem 0;
}
```

```
const MAX\_PRIME = 1000000;

function isPrime(n) {
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) {
      return false;
    }
  }
  return n > 1;
}

const random = (max) => Math.floor(Math.random() \* max);

function generatePrimes(quota) {
  const primes = [];
  while (primes.length < quota) {
    const candidate = random(MAX\_PRIME);
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }
  return primes;
}

const quota = document.querySelector("#quota");
const output = document.querySelector("#output");

document.querySelector("#generate").addEventListener("click", () => {
  const primes = generatePrimes(quota.value);
  output.textContent = `Terminou de gerar ${quota.value} primos!`;
});

document.querySelector("#reload").addEventListener("click", () => {
  document.location.reload();
});
```

Este é o problema básico com funções síncronas de longa duração. O que precisamos é de uma maneira para o nosso programa:

1. Inicie uma operação de longa duração chamando uma função.
2. Faça com que essa função inicie a operação e retorne imediatamente, para que nosso programa ainda possa responder a outros eventos.
3. Notifique-nos com o resultado da operação quando ela for concluída.

Isso é precisamente o que as funções assíncronas podem fazer. O restante deste módulo explica como eles são implementados em JavaScript.

Manipuladores de eventos
------------------------

A descrição que acabamos de ver de funções assíncronas pode lembrá-lo de manipuladores de eventos e, se isso acontecer, você estará certo. Os manipuladores de eventos são realmente uma forma de programação assíncrona: você fornece uma função (o manipulador de eventos) que será chamada, não imediatamente, mas sempre que o evento ocorrer. Se "o evento" for "a operação assíncrona foi concluída", esse evento poderá ser usado para notificar o chamador sobre o resultado de uma chamada de função assíncrona.

Algumas APIs assíncronas iniciais usavam eventos exatamente dessa maneira. A API `XMLHttpRequest` permite que você faça solicitações HTTP para um servidor remoto usando JavaScript. Como isso pode levar muito tempo, é uma API assíncrona e você é notificado sobre o andamento e a eventual conclusão de uma solicitação anexando ouvintes de eventos ao objeto `XMLHttpRequest`.

O exemplo a seguir mostra isso em ação. Pressione "Clique para iniciar a solicitação" para enviar uma solicitação. Criamos um novo `XMLHttpRequest` e ouvimos seu evento `loadend` (en-US). O manipulador registra um "Concluído!" mensagem junto com o código de status.

Depois de adicionar o ouvinte do evento, enviamos a solicitação. Observe que, depois disso, podemos registrar "Requisição XHR iniciada": ou seja, nosso programa pode continuar em execução enquanto a solicitação estiver em andamento, e nosso manipulador de eventos será chamado quando a solicitação for concluída.

```html
<button id="xhr">Clique para iniciar a solicitação</button>
<button id="reload">Recarregar</button>

<pre readonly class="event-log"></pre>
```

```
pre {
  display: block;
  margin: 1rem 0;
}
```

```js
const log = document.querySelector(".event-log");

document.querySelector("#xhr").addEventListener("click", () => {
  log.textContent = "";

  const xhr = new XMLHttpRequest();

  xhr.addEventListener("loadend", () => {
    log.textContent = `${log.textContent}Concluído com status: ${xhr.status}`;
  });

  xhr.open(
    "GET",
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json",
  );
  xhr.send();
  log.textContent = `${log.textContent}Iniciada solicitação XHR\n`;
});

document.querySelector("#reload").addEventListener("click", () => {
  log.textContent = "";
  document.location.reload();
});
```

Isso é exatamente como os manipuladores de eventos que encontramos em um módulo anterior, exceto que, em vez de o evento ser uma ação do usuário, como o usuário clicar um botão, o evento é uma mudança no estado de algum objeto.

Manipuladores de eventos
------------------------

Um manipulador de eventos é um tipo específico de callback. Um callback é apenas uma função que é passada para outra função, com a expectativa de que o callback seja chamado no momento apropriado. Como acabamos de ver, os retornos de chamada costumavam ser a principal forma de implementação de funções assíncronas em JavaScript.

No entanto, o código baseado em callback pode ficar difícil de entender quando o próprio callback precisa chamar funções que aceitam um callback. Esta é uma situação comum se você precisar realizar alguma operação que se decompõe em uma série de funções assíncronas. Por exemplo, considere o seguinte:

```js
function doStep1(init) {
  return init + 1;
}

function doStep2(init) {
  return init + 2;
}

function doStep3(init) {
  return init + 3;
}

function doOperation() {
  let result = 0;
  result = doStep1(result);
  result = doStep2(result);
  result = doStep3(result);
  console.log(`result: ${result}`);
}

doOperation();
```

Aqui temos uma única operação que é dividida em três etapas, onde cada etapa depende da última etapa. Em nosso exemplo, a primeira etapa adiciona 1 à entrada, a segunda adiciona 2 e a terceira adiciona 3. Começando com uma entrada de 0, o resultado final é 6 (0 + 1 + 2 + 3). Como um programa síncrono, isso é muito simples. Mas e se implementássemos as etapas usando retornos de chamada?

```js
function doStep1(init, callback) {
  const result = init + 1;
  callback(result);
}

function doStep2(init, callback) {
  const result = init + 2;
  callback(result);
}

function doStep3(init, callback) {
  const result = init + 3;
  callback(result);
}

function doOperation() {
  doStep1(0, (result1) => {
    doStep2(result1, (result2) => {
      doStep3(result2, (result3) => {
        console.log(`result: ${result3}`);
      });
    });
  });
}

doOperation();
```

Como temos que chamar callbacks dentro de callbacks, obtemos uma função `doOperation()` profundamente aninhada, que é muito mais difícil de ler e depurar. Isso às vezes é chamado de "inferno de callback" ou "pirâmide da desgraça" (porque o recuo parece uma pirâmide de lado).

Quando aninhamos callbacks como este, também pode ficar muito difícil lidar com erros: muitas vezes você precisa lidar com erros em cada nível da "pirâmide", em vez de lidar com erros apenas uma vez no nível superior.

Por esses motivos, as APIs assíncronas mais modernas não usam retornos de chamada. Em vez disso, a base da programação assíncrona em JavaScript é a `Promise`, e esse é o assunto do próximo artigo.

* Menu: Asynchronous
* Próxima


JavaScript e CSS - Aprendendo desenvolvimento web

JavaScript e CSS
================

Esta é a primeira sessão da Parte II do Tutorial de CSS. A parte II contém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.

Cada página da Parte II ilustra como o CSS interage com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.

Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.

 Sessão Anterior (da Parte I): Media
 Próxima sessão: SVG

### Informação: JavaScript

JavaScript é uma *linguagem de programação*. JavaScript é largamente utilizado para promover interatividade em web sites e aplicações.

JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o estilo de um documento de forma dinâmica

Há três formas de fazer isso:

* Trabalhando com lista de documentos de stylesheets — por exemplo: adicionando, removendo ou adicionando um stylesheet.
* Trabalhando com as regras em uma stylesheet — por exemplo: adicionando, removendo ou modificando uma regra.
* Trabalhando com um documento individual na DOM — modificando seu estilo independentemente do stylesheets do documento.

| Para mais informações sobre JavaScript, veja a página JavaScript nesta wiki. |
| --- |

### Ação: Uma demonstração de JavaScript

Faça um novo documento em HTML, `doc5.html`. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:

```html
<!doctype html>
<html>
  <head>
    <title>Mozilla CSS Getting Started - JavaScript demonstration</title>
    <link rel="stylesheet" type="text/css" href="style5.css" />
    <script type="text/javascript" src="script5.js"></script>
  </head>

  <body>
    <h1>JavaScript sample</h1>

    <div id="square"></div>

    <button type="button" onclick="doDemo(this);">Click Me</button>
  </body>
</html>
```

Crie um novo arquivo CSS, `style5.css`. Copie e cole o conteúdo daqui:

```css
/\*\*\* JavaScript demonstration \*\*\*/
#square {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  margin-bottom: 1em;
}

button {
  padding: 0.5em 2em;
}
```

Crie um novo arquivo de texto, `script5.js`. Copie e cole o conteúdo daqui:

```js
// JavaScript demonstration
function doDemo(button) {
  var square = document.getElementById("square");
  square.style.backgroundColor = "#fa4";
  button.setAttribute("disabled", "true");
  setTimeout(clearDemo, 2000, button);
}

function clearDemo(button) {
  var square = document.getElementById("square");
  square.style.backgroundColor = "transparent";
  button.removeAttribute("disabled");
}
```

Abra o documento no seu Browser e pressione o botão.

Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:

|  |  |  |  |
| --- | --- | --- | --- |
|

|  |
| --- |
| **JavaScript demonstration** |

 |

|  |
| --- |
| **JavaScript demonstration** |

 |

**Nota:** Sobre esta demonstração:

* O documento HTML tem uma folha de estilo anexada, bem como um arquivo de script.
* O script trabalha com elementos individuais no DOM. Ele modifica o square's style diretamente. Ele modifica o estilo dos botões indiretamente mudando um atributo.
* Em JavaScript, `document.getElementById("square")` é similar em função ao seletor CSS `#square`.
* Em JavaScript, `backgroundColor` corresponde à propriedade CSS `background-color`. JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele.
* Seu browser tem uma regra built-in CSS para `button[disabled="true"]` ela muda a aparência dos botões quando está disabilitado.

| Altere o script para que o quadrado salte 20 cm para a direita quando sua cor mudar e volte para trás quando retornar à cor base. |
| --- |

Veja a solução deste desafio.

O que vem agora?

Se você teve dificuldade para entender esta página, ou se tem algum comentário sobre ela, por favor, contribua nesta página de Discussão.

Nesta demonstração, o documento HTML é vinculado ao script, embora apenas o elemento botão o utilize. ozilla estende CSS para permitir que você associe código JavaScript (assim como conteúdo e outras folhas de estilo) com elementos selecionados. A próxima página demonstra isso: **Ligações XBL**


AJAX - Aprendendo desenvolvimento web

AJAX
====

**Primeiros passos** Uma introdução ao AJAX.

**AJAX** é o acrônimo para **JavaScript assíncrono + XML.** Não é exatamente uma tecnologia nova, mas um termo empregado em 2005 por Jesse James Garrett para descrever uma nova forma de utilizar em conjunto algumas tecnologias, incluindo HTML ou XHTML, CSS, JavaScript, DOMl (en-US), XML (en-US), XSLT (en-US), e o mais importante: objeto XMLHttpRequest.
 Quando essas tecnologias são combinadas no modelo AJAX, as aplicações web que a utilizam são capazes de fazer rapidamente atualizações incrementais para a interface do usuário sem recarregar a página inteira do navegador. Isso torna a aplicação mais rápida e sensível às ações do usuário.

Embora a letra X em AJAX corresponda ao XML, atualmente o JSON é mais utilizado que o XML devido às suas vantagens, como ser mais leve e ser parte do JavaScript. Ambos (JSON e XML) são utilizados para obter informações do pacote no modelo AJAX.

Documentação
------------

AJAX: Primeiros passos

Este artigo orientará o básico sobre AJAX e fornecerá dois exemplos para você começar.

Alternate Ajax Techniques

Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.

Ajax: A New Approach to Web Applications

Jesse James Garrett, of adaptive path, wrote this article in February 2005, introducing AJAX and its related concepts.

A Simpler Ajax Path

"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."

Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.

Ajax Mistakes

Alex Bosworth has written this article outlining some of the mistakes AJAX application developers can make.

HTML no XMLHttpRequest (en-US)

MDN guide

Especificação XMLHttpRequest

W3C Working draft

Outros recursos

Outros recursos do AJAX que podem ser úteis.

Ferramentas
-----------

* Toolkits and frameworks
* Firebug - Ajax/Web development tool
* AJAX Debugging Tool
* Flash/AJAX Integration Kit
* A Simple XMLHTTP Interface Library
Exemplos
--------

* AJAX poller script
* Ajax Chat Tutorial
* RSS Ticker with AJAX
* AJAX Login System using XMLHttpRequest
* Create your own Ajax effects
* AJAX: Creating Huge Bookmarklets
* AJAX: Hot!Ajax There are many cool examples
Tópicos relacionados
--------------------

HTML, XHTML, CSS, DOM (en-US), JavaScript, XML (en-US), XMLHttpRequest, XSLT (en-US), DHTML, Canvas