Tomando decisões no seu código — condicionais - Aprendendo desenvolvimento web

Tomando decisões no seu código — condicionais
=============================================

* Menu: Building blocks
* Próxima

Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo, dependendo de diferentes entradas. Por exemplo, em um jogo, se o número de vidas do jogador é 0, então o jogo acaba. Em um aplicativo de clima, se estiver sendo observado pela manhã, ele mostra um gráfico do nascer do sol; Mostra estrelas e uma lua se for noite. Neste artigo, exploraremos como as chamadas declarações condicionais funcionam em JavaScript.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento básico de algoritmos, um entendimento básico de HTML e CSS,
 JavaScript primeiros passos.
  |
| Objetivo: | Entender como usar estruturas condicionais em JavaScript. |

Você pode tê-lo em uma condição ...!
------------------------------------

Seres humanos (e outros animais) tomam decisões o tempo todo que afetam suas vidas, desde pequenas ("devo comer um biscoito ou dois?") até grandes ("devo ficar no meu país de origem e trabalhar na fazenda do meu pai ou devo mudar para a América e estudar astrofísica?").

As declarações condicionais nos permitem representar tomadas de decisão como estas em *JavaScript*, a partir da escolha que deve ser feita (por exemplo, "um biscoito ou dois"), ao resultado obtido dessas escolhas (talvez o resultado de "comer um biscoito" possa ser "ainda sentido fome ", e o resultado de "comer dois biscoitos" pode ser "ter se sentido cheio, mas mamãe me falou para comer todos os biscoitos".)

![](/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals/cookie-choice-small.png)

Declarações if ... else
-----------------------

De longe o tipo mais comum de declaração condicional que você usará em JavaScript — as modestas declarações `if ... else`.

### Sintaxe básica if ... else

Veja a sintaxe básica do `if...else` no pseudocódigo:
```

if (condicao) {
  codigo para executar caso a condição seja verdadeira
} else {
  senão, executar este código
}
```

Aqui nós temos:

1. A palavra reservada `if` seguida de um par de parênteses.
2. Um teste condicional, localizado dentro dos parênteses (normalmente "este valor é maior que esse", ou "este valor existe"). Esta condição pode fazer uso dos operadores de comparação que discutimos no último módulo, e podem retornar `true` ou `false`.
3. Um par de chaves, e dentro dele temos código — pode ser qualquer código que queiramos, e só vai ser executado se o teste condicional retornar `true`.
4. A palavra reservada `else`.
5. Outro par de chaves, dentro dele temos mais um pouco de código — pode ser qualquer código que queiramos, e só vai executar se o teste condicional retornar um valor diferente de `true`, neste caso `not true`, ou `false`.

Este tipo de código é bem legível por seres humanos — ele diz: "**if** a condição for `true`, execute o bloco de código A, **else** execute o bloco de código B" (**se** a condição for **verdadeira**, execute o bloco de código A, **senão** execute o bloco de código B).

Você precisa saber que não é obrigado a colocar a palavra reservada `else` e o segundo bloco de par de chaves. O código apresentado a seguir é perfeitamente válido e não produz erros:
```

if (condicao) {
  codigo para executar se a condição for verdadeira
}

código a ser executado
```

Entretanto, você precisa ser cauteloso aqui — neste caso, repare que o segundo bloco de código não é controlado pela declaração condicional, então ele vai executar **sempre**, independente do teste condicional retornar `true` ou `false`. É claro, isto não é necessariamente uma coisa ruim, mas isso pode não ser o que você quer — com muita frequência você vai querer executar ou um bloco de código ou outro, não os dois juntos.

Por fim, você verá muitas vezes declarações `if...else` escritas sem as chaves, no seguinte estilo de escrita:
```

if (condicao) executar aqui se for verdadeira
else executar este outro codigo
```

Este é um código perfeitamente válido, mas não é recomendado — ele facilita que você escreva código fora do escopo do `if` e do `else`, o que seria mais difícil se você estivesse usando as chaves para delimitar os blocos de código, e usando multiplas linhas de código e identação.

### Um exemplo real

Para entender bem a sintaxe, vamos considerar um exemplo real. Imagine um filhote de humanos sendo chamdo a ajudar com as tarefas do Pai ou da Mãe. Os pais podem falar: "Ei querido, se você me ajudar a ir e fazer as compras, eu te dou uma grana extra para que você possa comprar aquele brinquedo que você quer." Em JavaScript, nós podemos representar isso como:

```js
var comprasFeitas = false;

if (comprasFeitas === true) {
  var granaFilhote = 10;
} else {
  var granaFilhote = 5;
}
```

Esse código como mostrado irá sempre resultar na variável `comprasFeitas` retornando `false`, sendo um desapontamento para nossas pobres crianças. Cabe a nós fornecer um mecanismo para o pai definir a variável `comprasFeitas` como `true` se o filho fez as compras.

**Nota:** Você pode ver a versão completa desse exemplo no GitHub (também veja live.)

### else if

O último exemplo nos forneceu duas opções ou resultados - mas e se quisermos mais do que dois?

Existe uma maneira de encadear escolhas/resultados extras ao seu `if...else` — usando `else if`. Cada escolha extra requer um bloco adicional para colocar entre `if() { ... }` e `else { ... }` — confira o seguinte exemplo mais envolvido, que pode fazer parte de um aplicativo simples de previsão do tempo:

```html
<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
```

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

select.addEventListener("change", setWeather);

function setWeather() {
  var choice = select.value;

  if (choice === "sunny") {
    para.textContent =
      "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
  } else if (choice === "rainy") {
    para.textContent =
      "Rain is falling outside; take a rain coat and a brolly, and don't stay out for too long.";
  } else if (choice === "snowing") {
    para.textContent =
      "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
  } else if (choice === "overcast") {
    para.textContent =
      "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
  } else {
    para.textContent = "";
  }
}
```

1. Aqui, temos um elemento HTML `<select>` que nos permite fazer escolhas de clima diferentes e um simples parágrafo.
2. No JavaScript, estamos armazenando uma referência para ambos os elementos `<select>` e `<p>`, e adicionando um listener de evento ao elemento `<select>` para que, quando o valor for alterado, a função `setWeather()` é executada.
3. Quando esta função é executada, primeiro definimos uma variável chamada `choice` para o valor atual selecionado no elemento `<select>`. Em seguida, usamos uma instrução condicional para mostrar um texto diferente dentro do parágrafo, dependendo de qual é o valor de `choice` . Observe como todas as condições são testadas nos blocos `else if() {...}`, com exceção do primeiro, que é testado em um bloco `if() {...}`.
4. A última escolha, dentro do bloco `else {...}`, é basicamente uma opção de "último recurso" — o código dentro dele será executado se nenhuma das condições for `true`. Nesse caso, ele serve para esvaziar o texto do parágrafo, se nada for selecionado, por exemplo, se um usuário decidir selecionar novamente a opção de espaço reservado "- Make a choice--" mostrada no início.

**Nota:** Você pode também encontrar este exemplo no GitHub (veja ele sendo executado lá também.)

### Uma nota sobre os operadores de comparação

Operadores de comparação são usados para testar as condições dentro de nossas declarações condicionais. Nós primeiro olhamos para operadores de comparação de volta em nosso artigo Matemática básica em JavaScript - números e operadores. Nossas escolhas são:

* `===` e `!==` — testar se um valor é idêntico ou não idêntico a outro.
* `<` e `>` — teste se um valor é menor ou maior que outro.
* `<=` e `>=` — testar se um valor é menor ou igual a, ou maior que ou igual a outro.

**Nota:** Revise o material no link anterior se quiser atualizar suas memórias sobre eles.

Queríamos fazer uma menção especial do teste de valores boolean (`true`/`false`) , e um padrão comum que você vai encontrar de novo e de novo. Qualquer valor que não seja `false`, `undefined`, `null`, `0`, `NaN`, ou uma string vazia (`''`) retorna `true` quando testado como uma instrução condicional, portanto, você pode simplesmente usar um nome de variável para testar se é verdadeiro , ou mesmo que existe (ou seja, não é indefinido). Por exemplo:

```js
var cheese = "Cheddar";

if (cheese) {
  console.log("Yay! Cheese available for making cheese on toast.");
} else {
  console.log("No cheese on toast for you today.");
}
```

E, voltando ao nosso exemplo anterior sobre a criança fazendo uma tarefa para seu pai, você poderia escrevê-lo assim:

```js
var shoppingDone = false;

if (shoppingDone) {
  // don't need to explicitly specify '=== true'
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}
```

### Aninhando if ... else

É perfeitamente correto colocar uma declaração `if...else` dentro de outra — para aninhá-las. Por exemplo, poderíamos atualizar nosso aplicativo de previsão do tempo para mostrar mais opções dependendo de qual é a temperatura:

```js
if (choice === "sunny") {
  if (temperature < 86) {
    para.textContent =
      "It is " +
      temperature +
      " degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.";
  } else if (temperature >= 86) {
    para.textContent =
      "It is " +
      temperature +
      " degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.";
  }
}
```

Mesmo que o código trabalhe em conjunto, cada uma das instruções `if...else` funcionam completamente independente uma da outra.

### Operadores lógicos: AND, OR e NOT

Se você quiser testar várias condições sem escrever instruções aninhadas `if...else`, os operadores lógicos (en-US) poderão ajudá-lo. Quando usado em condições, os dois primeiros fazem o seguinte:

* `&&` — AND; permite encadear duas ou mais expressões para que todas elas tenham que ser avaliadas individualmente como `true` assim toda a expressão retorna `true`.
* `||` — OR; permite encadear duas ou mais expressões para que uma ou mais delas tenham que ser avaliadas individualmente como `true` assim toda a expressão retorna `true`.

Para fornecer um exemplo AND, o fragmento de exemplo anterior pode ser reescrito assim:

```js
if (choice === "sunny" && temperature < 86) {
  para.textContent =
    "It is " +
    temperature +
    " degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.";
} else if (choice === "sunny" && temperature >= 86) {
  para.textContent =
    "It is " +
    temperature +
    " degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.";
}
```

Então, por exemplo, o primeiro bloco de código só será executado se ambas as condições `choice === 'sunny'` *e* `temperature < 86` retornarem `true`.

Vamos ver um exemplo rápido de OR:

```js
if (iceCreamVanOutside || houseStatus === "on fire") {
  console.log("You should leave the house quickly.");
} else {
  console.log("Probably should just stay in then.");
}
```

O último tipo de operador lógico, NOT, expressado pelo operador `!`, pode ser usado para negar uma expressão. Vamos combiná-lo com OR no exemplo acima:

```js
if (!(iceCreamVanOutside || houseStatus === "on fire")) {
  console.log("Probably should just stay in then.");
} else {
  console.log("You should leave the house quickly.");
}
```

Nesse trecho, se a instrução OR retornar `true`, o operador NOT negará isso para que a expressão geral retorne `false`.

Você pode combinar tantas instruções lógicas quanto quiser, em qualquer estrutura. O exemplo a seguir executa o código interno apenas se ambos os conjuntos de instruções OR retornarem true, significando que a instrução AND global também retornará true:

```js
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === "Steve")) {
  // run the code
}
```

Um erro comum ao usar o operador OR lógico em instruções condicionais é tentar indicar a variável cujo valor você está verificando uma vez e, em seguida, fornecer uma lista de valores que poderia ser para retornar true, separados pelos operadores `||` (OR) . Por exemplo:

```js
if (x === 5 || 7 || 10 || 20) {
  // run my code
}
```

Nesse caso, a condição dentro de `if(...)` sempre será avaliada como verdadeira, já que 7 (ou qualquer outro valor diferente de zero) sempre é avaliado como verdadeiro. Esta condição está realmente dizendo "se x é igual a 5, ou 7 é verdade — o que sempre é". Isso logicamente não é o que queremos! Para fazer isso funcionar, você precisa especificar um teste completo ao lado de cada operador OR:

```js
if (x === 5 || x === 7 || x === 10 || x === 20) {
  // run my code
}
```

Instruções switch
-----------------

As instruções `if...else` fazem o trabalho de habilitar o código condicional bem, mas elas também possuem suas desvantagens. Elas são boas principalmente para casos em que você tem algumas opções, e cada uma requer uma quantidade razoável de código para ser executado, e / ou as condições são complexas (por exemplo, vários operadores lógicos). Nos casos em que você deseja definir uma variável para uma determinada opção de valor ou imprimir uma determinada instrução dependendo de uma condição, a sintaxe pode ser um pouco incômoda, especialmente se você tiver um grande número de opções.

As instruções`switch` são suas amigas aqui — elas tomam uma única expressão / valor como uma entrada e, em seguida, examinam várias opções até encontrarem um que corresponda a esse valor, executando o código correspondente que o acompanha. Aqui está mais um pseudocódigo, para você ter uma ideia:
```

switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;

  // include as many cases as you like

  default:
    actually, just run this code
}
```

Aqui nós temos:

1. A palavra-chave `switch`, seguido por um par de parênteses.
2. Uma expressão ou valor dentro dos parênteses.
3. A palavra-chave `case`, seguido por uma escolha que a expressão / valor poderia ser, seguido por dois pontos.
4. Algum código para ser executado se a escolha corresponder à expressão.
5. Uma instrução `break`, seguido de um ponto e vírgula. Se a opção anterior corresponder à expressão / valor, o navegador interromperá a execução do bloco de código aqui e passará para qualquer código que aparecer abaixo da instrução switch.
6. Como muitos outros casos (marcadores 3 a 5) que você quiser.
7. A palavra-chave `default`, seguido por exatamente o mesmo padrão de código de um dos casos (marcadores 3 a 5), exceto que o `default` não tem escolha após ele, e você não precisa da instrução `break`, pois não há nada para executar depois disso o bloco de qualquer maneira. Esta é a opção padrão que é executada se nenhuma das opções corresponder.

**Nota:** Você não precisa incluir a seção `default` — você pode omiti-la com segurança se não houver chance de que a expressão possa se igualar a um valor desconhecido. Se houver uma chance disso, você precisará incluí-lo para lidar com casos desconhecidos.

### Um exemplo de switch

Vamos dar uma olhada em um exemplo real — vamos reescrever nosso aplicativo de previsão do tempo para usar uma instrução switch:

```html
<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
```

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

select.addEventListener("change", setWeather);

function setWeather() {
  var choice = select.value;

  switch (choice) {
    case "sunny":
      para.textContent =
        "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
      break;
    case "rainy":
      para.textContent =
        "Rain is falling outside; take a rain coat and a brolly, and don't stay out for too long.";
      break;
    case "snowing":
      para.textContent =
        "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
      break;
    case "overcast":
      para.textContent =
        "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
      break;
    default:
      para.textContent = "";
  }
}
```

**Nota:** Você pode encontrar este exemplo no GitHub (veja-o em execução lá também.)

Operador ternário
-----------------

Há um bit final de sintaxe que queremos apresentar a você antes de começar a brincar com alguns exemplos. O operador ternário ou condicional é um pequeno bit de sintaxe que testa uma condição e retorna um valor / expressão se for `true`, e outro caso seja `false` — isso pode ser útil em algumas situações e pode ocupar muito menos código que um bloco `if...else` se você simplesmente tiver duas opções escolhidas entre uma condição `true`/`false` condition. O pseudocódigo é assim:
```

( condition ) ? run this code : run this code instead
```

Então, vamos dar uma olhada em um exemplo simples:

```js
var greeting = isBirthday
  ? "Happy birthday Mrs. Smith — we hope you have a great day!"
  : "Good morning Mrs. Smith.";
```

Aqui temos uma variável chamada `isBirthday` — se ela for `true`, nós damos ao nosso convidado uma mensagem de feliz aniversário; se não, damos a ela a saudação diária padrão.

### Exemplo de operador ternário

Você não precisa apenas definir valores de variáveis com o operador ternário; Você também pode executar funções ou linhas de código - qualquer coisa que você gosta. O exemplo ao vivo a seguir mostra um seletor de temas simples em que o estilo do site é aplicado usando um operador ternário.

```html
<label for="theme">Select theme: </label>
<select id="theme">
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

<h1>This is my website</h1>
```

```js
var select = document.querySelector("select");
var html = document.querySelector("html");
document.body.style.padding = "10px";

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function () {
  select.value === "black"
    ? update("black", "white")
    : update("white", "black");
};
```

Aqui nós temos um elemento `<select>` para escolher um tema (preto ou branco), além de um simples `<h1>` (en-US) para exibir um título do site. Nós também temos uma função chamada `update()`, que leva duas cores como parâmetros (entradas). A cor do plano de fundo do site é definida para a primeira cor fornecida e sua cor de texto é definida para a segunda cor fornecida.

Finalmente, nós também temos um evento listener onchange que serve para executar uma função que contém um operador ternário. Começa com uma condição de teste — `select.value === 'black'`. Se este retornar `true`, nós executamos a função `update()` com parâmetros de preto e branco, o que significa que acabamos com a cor de fundo do preto e cor do texto de branco. Se retornar `false`, nós executamos a função `update()` com parâmetros de branco e preto, o que significa que a cor do site está invertida.

**Nota:** Você pode também encontrar este exemplo no GitHub (veja-o executando lá também.)

Aprendizado ativo: um calendário simples
----------------------------------------

Neste exemplo, você nos ajudará a concluir um aplicativo de calendário simples. No código que você tem:

* Um elemento `<select>` para permitir que o usuário escolha entre diferentes meses.
* Um evento manipulador `onchange` para detectar quando o valor selecionado no menu `<select>` é mudado.
* Uma função chamada `createCalendar()` que desenha o calendário e exibe o mês correto no elemento `<h1>` (en-US) .

Precisamos que você escreva uma instrução condicional dentro da função do manipulador onchange, logo abaixo do comentário `// ADD CONDITIONAL HERE`. Ele deve:

1. Olhar para o mês selecionado (armazenado na variavel `choice`. Este será o valor do elemento `<select>` após o valor ser alterado, portanto, "Janeiro", por exemplo.
2. Definir uma variável chamada `days` para ser igual ao número de dias no mês selecionado. Para fazer isso, você terá que procurar o número de dias em cada mês do ano. Você pode ignorar anos bissextos para os propósitos deste exemplo.

Dicas:

* É aconselhável usar o OR lógico para agrupar vários meses em uma única condição; muitos deles compartilham o mesmo número de dias.
* Pense em qual número de dias é o mais comum e use isso como um valor padrão.

Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente preso, pressione "Mostrar solução" para ver uma solução.
```

<div class="output" style="height: 500px;overflow: auto;">
  <label for="month">Select month: </label>
  <select id="month">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
  </select>

  <h1></h1>

  <ul></ul>
</div>

<hr />

<textarea id="code" class="playable-code" style="height: 500px;">
var select = document.querySelector('select');
var list = document.querySelector('ul');
var h1 = document.querySelector('h1');

select.onchange = function() {
  var choice = select.value;

  // ADD CONDITIONAL HERE

  createCalendar(days, choice);
}

function createCalendar(days, choice) {
  list.innerHTML = '';
  h1.textContent = choice;
  for (var i = 1; i <= days; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}

createCalendar(31,'January');
</textarea>

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

```
.output \* {
  box-sizing: border-box;
}

.output ul {
  padding-left: 0;
}

.output li {
  display: block;
  float: left;
  width: 25%;
  border: 2px solid white;
  padding: 5px;
  height: 40px;
  background-color: #4a2db6;
  color: white;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  updateCode();
});

solution.addEventListener("click", function () {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution =
  "var select = document.querySelector('select');\nvar list = document.querySelector('ul');\nvar h1 = document.querySelector('h1');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === 'February') {\n days = 28;\n } else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = '';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement('li');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,'January');";

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

Aprendizado ativo: mais opções de cores!
----------------------------------------

Neste exemplo, você terá o exemplo de operador ternário que vimos anteriormente e converterá o operador ternário em uma instrução switch que nos permitirá aplicar mais opções ao site simples. Olhe para a `<select>` — desta vez você verá que não tem duas opções de tema, mas cinco. Você precisa adicionar uma instrução switch abaixo do comentário `// ADD SWITCH STATEMENT`:

* Ele deve aceitar a variável `choice` como sua expressão de entrada.
* Para cada caso, a escolha deve ser igual a um dos valores possíveis que podem ser selecionados, ou seja, branco, preto, roxo, amarelo ou psicodélico.
* Para cada caso, a função `update()` deve ser executada e receber dois valores de cor, o primeiro para a cor de segundo plano e o segundo para a cor do texto. Lembre-se de que valores de cores são strings, portanto, precisam ser agrupados entre aspas.

Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente travado, pressione "Show solution" para ver uma solução.
```

<div class="output" style="height: 300px;">
  <label for="theme">Select theme: </label>
  <select id="theme">
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="purple">Purple</option>
    <option value="yellow">Yellow</option>
    <option value="psychedelic">Psychedelic</option>
  </select>

  <h1>This is my website</h1>
</div>

<hr />

<textarea id="code" class="playable-code" style="height: 450px;">
var select = document.querySelector('select');
var html = document.querySelector('.output');

select.onchange = function() {
  var choice = select.value;

  // ADD SWITCH STATEMENT
}

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}</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;

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

reset.addEventListener("click", function () {
  textarea.value = code;
  updateCode();
});

solution.addEventListener("click", function () {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution =
  "var select = document.querySelector('select');\nvar html = document.querySelector('.output');\n\nselect.onchange = function() {\n var choice = select.value;\n\n switch(choice) {\n case 'black':\n update('black','white');\n break;\n case 'white':\n update('white','black');\n break;\n case 'purple':\n update('purple','white');\n break;\n case 'yellow':\n update('yellow','darkgray');\n break;\n case 'psychedelic':\n update('lime','purple');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}";

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

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

E isso é tudo que você realmente precisa saber sobre estruturas condicionais no JavaScript por agora! Tenho certeza que você terá entendido esses conceitos e trabalhou com os exemplos com facilidade; se houver algo que você não tenha entendido, sinta-se à vontade para ler o artigo novamente ou contate-nos para pedir ajuda.

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

* Operadores de comparação
* Declarações condicionais em detalhes
* Referência if...else
* Referência do operador condicional (ternário)
Teste suas habilidades!
-----------------------

Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja Teste suas habilidades: Condicionais (en-US).

* Menu: Building blocks
* Próxima


Construa sua própria função - Aprendendo desenvolvimento web

Construa sua própria função
===========================

* Anterior
* Menu: Building blocks
* Próxima

Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece experiência prática. Aqui você terá algumas práticas construindo sua própria função personalizada. Ao longo do caminho, também explicaremos alguns detalhes úteis sobre como lidar com funções.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Alfabetização básica em informática, um entendimento básico de HTML e
 CSS,
 Primeiros passos do JavaScript,
 Funções — blocos reutilizáveis de código.
  |
| Objetiva: |
 Para fornecer alguma prática na criação de uma função personalizada e
 explicar alguns detalhes associados mais úteis.
  |

Aprendizagem ativa: vamos construir uma função
----------------------------------------------

A função personalizada que vamos construir será chamada `displayMessage()`. Ele exibirá uma caixa de mensagem personalizada em uma página da Web e atuará como um substituto personalizado para a função de alert() interna do navegador. Já vimos isso antes, mas vamos apenas refrescar nossas memórias. Digite o seguinte no console JavaScript do seu navegador, em qualquer página de sua preferência:

```js
alert("This is a message");
```

A função `alert` leva um único argumento — a string exibida na caixa de alerta. Tente variar a string para mudar a mensagem.

A função `alert` é limitada: você pode alterar a mensagem, mas não pode variar com facilidade nada, como cor, ícone ou qualquer outra coisa. Nós vamos construir um que se mostrará mais divertido.

**Nota:** Este exemplo deve funcionar bem em todos os navegadores modernos, mas o estilo pode parecer um pouco engraçado em navegadores um pouco mais antigos. Recomendamos que você faça esse exercício em um navegador moderno como o Firefox, o Opera ou o Chrome.

A função básica
---------------

Para começar, vamos montar uma função básica.

**Nota:** Para convenções de nomenclatura de função, você deve seguir as mesmas regras das convenções de nomenclatura de variáveis. Algo bom é como você pode diferenciá-los — os nomes das funções aparecem com parênteses depois deles e as variáveis não.

1. Comece acessando o arquivo function-start.html e fazendo uma cópia local. Você verá que o HTML é simples — o corpo contém apenas um único botão. Também fornecemos algumas CSS básicas para estilizar a caixa de mensagem personalizada e um elemento `<script>` vazio para colocar nosso JavaScript.
2. Em seguida, adicione o seguinte dentro do elemento `<script>` :

```js
function displayMessage() {}
```

Começamos com a palavra-chave `function`, o que significa que estamos definindo uma função. Isto é seguido pelo nome que queremos dar à nossa função, um par de parênteses e um conjunto de chaves. Quaisquer parâmetros que queremos dar à nossa função vão dentro dos parênteses, e o código que é executado quando chamamos a função vai dentro das chaves.
3. Por fim, adicione o seguinte código dentro das chaves:

```js
var html = document.querySelector("html");

var panel = document.createElement("div");
panel.setAttribute("class", "msgBox");
html.appendChild(panel);

var msg = document.createElement("p");
msg.textContent = "This is a message box";
panel.appendChild(msg);

var closeBtn = document.createElement("button");
closeBtn.textContent = "x";
panel.appendChild(closeBtn);

closeBtn.onclick = function () {
  panel.parentNode.removeChild(panel);
};
```

Isso é um monte de código para passar, então vamos guiá-lo pouco a pouco.

A primeira linha usa uma função da API do DOM chamada `document.querySelector()` para selecionar o elemento `<html>` e armazenar uma referência a ele em uma variável chamada `html`, para que possamos fazer coisas com ela mais tarde:

```js
var html = document.querySelector("html");
```

A próxima seção usa outra função da API do DOM chamada `Document.createElement()` para criar um elemento `<div>` elemento e armazenar uma referência a ele em uma variável chamada `panel`. Este elemento será o recipiente externo da nossa caixa de mensagens.

Em seguida, usamos outra função da API do DOM chamada `Element.setAttribute()` para setar o atributo `class` atributo no nosso painel com um valor de `msgBox`. Isso é para facilitar o estilo do elemento — se você olhar para o CSS na página, verá que estamos usando um seletor de classe `.msgBox` para estilizar a caixa de mensagem e seu conteúdo.

Finalmente, chamamos uma função DOM chamada `Node.appendChild()` na variável `html` que armazenamos anteriormente, que nidifica um elemento dentro do outro como um filho dele. Nós especificamos o painel `<div>` como o filho que queremos acrescentar dentro do elemento `<html>` Precisamos fazer isso porque o elemento que criamos não aparecerá na página sozinho — precisamos especificar onde colocá-lo.

```js
var panel = document.createElement("div");
panel.setAttribute("class", "msgBox");
html.appendChild(panel);
```

As próximas duas seções fazem uso das mesmas funções `createElement()` e `appendChild()` que já vimos para criar dois novos elementos — um `<p>` e um `<button>` — e inseri-los na página como filhos do painel `<div>`. Nós usamos a sua propriedade `Node.textContent` — que representa o conteúdo de texto de um elemento — para inserir uma mensagem dentro do parágrafo e um 'x' dentro do botão. Este botão será o que precisa ser clicado / ativado quando o usuário quiser fechar a caixa de mensagem.

```js
var msg = document.createElement("p");
msg.textContent = "This is a message box";
panel.appendChild(msg);

var closeBtn = document.createElement("button");
closeBtn.textContent = "x";
panel.appendChild(closeBtn);
```

Finalmente, usamos um manipulador eventos `GlobalEventHandlers.onclick` para fazer com que, quando o botão é clicado, algum código seja executado para excluir todo o painel da página — para fechar a caixa de mensagem.

Resumidamente, o manipulador `onclick` é uma propriedade disponível no botão (ou, na verdade, qualquer elemento na página) que pode ser definida para uma função para especificar qual código será executado quando o botão for clicado. Você aprenderá muito mais sobre isso em nosso artigo de eventos posteriores. Estamos tornando o manipulador `onclick` igual a uma função anônima, que contém o código a ser executado quando o botão é clicado. A linha dentro da função usa a função da API do DOM `Node.removeChild()` para especificar que queremos remover um elemento filho específico do elemento HTML — nesse caso, o painel `<div>`.

```js
closeBtn.onclick = function () {
  panel.parentNode.removeChild(panel);
};
```

Basicamente, todo esse bloco de código está gerando um bloco de HTML semelhante a isso e inserindo-o na página:

```html
<div class="msgBox">
  <p>This is a message box</p>
  <button>x</button>
</div>
```

Isso foi um monte de código para trabalhar — não se preocupe muito se você não se lembra exatamente como tudo funciona agora! A parte principal que queremos focar aqui é a estrutura e uso da função, mas queremos mostrar algo interessante para este exemplo.

Chamando a função
-----------------

Você tem sua própria definição de função escrita em seu elemento `<script>`, mas não fará nada do jeito que está.

1. Tente incluir a seguinte linha abaixo da sua função para chamá-lo:

```js
displayMessage();
```

Esta linha chama a função, fazendo com que ela seja executada imediatamente. Quando você salvar seu código e recarregá-lo no navegador, verá a pequena caixa de mensagem aparecer imediatamente, apenas uma vez. Nós só estamos chamando uma vez, afinal.
2. Agora abra suas ferramentas de desenvolvedor do navegador na página de exemplo, vá para o console JavaScript e digite a linha novamente, você verá que ela aparece novamente! Então isso é divertido — agora temos uma função reutilizável que podemos chamar a qualquer momento que quisermos.
 Mas provavelmente queremos que apareça em resposta a ações do usuário e do sistema. Em um aplicativo real, essa caixa de mensagem provavelmente seria chamada em resposta a novos dados sendo disponibilizados, ou um erro ocorreria, ou o usuário tentando excluir seu perfil ("você tem certeza disso?") Ou o usuário adicionando um novo contato e a operação completando com sucesso ... etc.
 Nesta demonstração, faremos com que a caixa de mensagem apareça quando o usuário clicar no botão.
3. Exclua a linha anterior que você adicionou.
4. Em seguida, vamos selecionar o botão e armazenar uma referência a ele em uma variável. Adicione a seguinte linha ao seu código, acima da definição da função:

```js
var btn = document.querySelector("button");
```

5. Por fim, adicione a seguinte linha abaixo da anterior:

```js
btn.onclick = displayMessage;
```

De maneira semelhante à nossa linha `closeBtn.onclick...` dentro da função, aqui estamos chamando algum código em resposta a um botão sendo clicado. Mas, neste caso, em vez de chamar uma função anônima contendo algum código, estamos chamando nosso nome de função diretamente.
6. Tente salvar e atualizar a página — agora você verá a caixa de mensagem quando clicar no botão.

Você pode estar se perguntando por que não incluímos os parênteses após o nome da função. Isso ocorre porque não queremos chamar a função imediatamente — somente depois que o botão foi clicado. Se você tentar mudar a linha para

```js
btn.onclick = displayMessage();
```

e salvar e recarregar, você verá que a caixa de mensagem aparece sem que o botão seja clicado! Os parênteses neste contexto são às vezes chamados de "operador de invocação de função". Você só os usa quando deseja executar a função imediatamente no escopo atual. No mesmo sentido, o código dentro da função anônima não é executado imediatamente, pois está dentro do escopo da função.

Se você tentou o último experimento, certifique-se de desfazer a última alteração antes de continuar.

Melhorando a função com parâmetros
----------------------------------

Tal como está, a função ainda não é muito útil — nós não queremos apenas mostrar a mesma mensagem padrão todas as vezes. Vamos melhorar nossa função adicionando alguns parâmetros, permitindo-nos chamá-lo com algumas opções diferentes.

1. Primeiro de tudo, atualize a primeira linha da função:

```js
function displayMessage() {
```

para isso:

```js
function displayMessage(msgText, msgType) {
```

Agora, quando chamamos a função, podemos fornecer dois valores de variáveis dentro dos parênteses para especificar a mensagem a ser exibida na caixa de mensagem e o tipo de mensagem que ela é.
2. Para utilizar o primeiro parâmetro, atualize a seguinte linha dentro da sua função:

```js
msg.textContent = "This is a message box";
```

to

```js
msg.textContent = msgText;
```

3. Por último, mas não menos importante, você precisa atualizar sua chamada de função para incluir um texto de mensagem atualizado. Altere a seguinte linha:

```js
btn.onclick = displayMessage;
```

para este bloco:

```js
btn.onclick = function () {
  displayMessage("Woo, this is a different message!");
};
```

Se quisermos especificar parâmetros dentro de parênteses para a função que estamos chamando, então não podemos chamá-la diretamente — precisamos colocá-lo dentro de uma função anônima para que não fique no escopo imediato e, portanto, não seja chamado imediatamente. Agora ele não será chamado até que o botão seja clicado.
4. Recarregue e tente o código novamente e você verá que ele ainda funciona muito bem, exceto que agora você também pode variar a mensagem dentro do parâmetro para obter mensagens diferentes exibidas na caixa!
### Um parâmetro mais complexo

Para o próximo parâmetro. Este vai envolver um pouco mais de trabalho — vamos configurá-lo para que, dependendo do parâmetro `msgType`, a função mostre um ícone diferente e uma cor de fundo diferente.

1. Primeiro de tudo, baixe os ícones necessários para este exercício (aviso e batepapo) do GitHub. Salve-os em uma nova pasta chamada `icons` no mesmo local que seu arquivo HTML.

**Nota:** Os icones aviso e batepapo são encontrado em iconfinder.com, e desenhados por Nazarrudin Ansyari. Obrigado!
2. Em seguida, encontre o CSS dentro do seu arquivo HTML. Faremos algumas alterações para abrir caminho para os ícones. Primeiro, atualize a largura do `.msgBox` de:

```css
width: 200px;
```

para:

```css
width: 242px;
```

3. Em seguida, adicione as seguintes linhas dentro da regra `.msgBox p { ... }`:

```css
padding-left: 82px;
background-position: 25px center;
background-repeat: no-repeat;
```

4. Agora precisamos adicionar código à nossa função `displayMessage()` para manipular a exibição dos ícones. Adicione o seguinte bloco logo acima da chave de fechamento (`}`) da sua função:

```js
if (msgType === "warning") {
  msg.style.backgroundImage = "url(icons/warning.png)";
  panel.style.backgroundColor = "red";
} else if (msgType === "chat") {
  msg.style.backgroundImage = "url(icons/chat.png)";
  panel.style.backgroundColor = "aqua";
} else {
  msg.style.paddingLeft = "20px";
}
```

Aqui, se o parâmetro `msgType` estiver definido como `'warning'`, o ícone de aviso será exibido e a cor de fundo do painel será definida como vermelha. Se estiver definido para `'chat'`, o ícone de bate-papo é exibido e a cor de fundo do painel é definida como azul aqua. Se o parâmetro `msgType` não estiver definido (ou para algo diferente), então a parte `else { ... }` do código entra em jogo, e o parágrafo é simplesmente fornecido padding padrão e nenhum ícone, sem conjunto de cores do painel de fundo também. Isso fornece um estado padrão se nenhum parâmetro `msgType` for fornecido, significando que é um parâmetro opcional!
5. Vamos testar nossa função atualizada, tente atualizar a chamada `displayMessage()` a partir disso:

```js
displayMessage("Woo, this is a different message!");
```

para um destes:

```js
displayMessage("Your inbox is almost full — delete some mails", "warning");
displayMessage("Brian: Hi there, how are you today?", "chat");
```

Você pode ver como a nossa pequena função (agora nem tanto) está se tornando útil.

**Nota:** Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na versão finalizada no GitHub (veja-a também em execução), ou peça nos ajuda.

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

Parabéns por chegar ao final! Este artigo levou você ao longo de todo o processo de criação de uma função prática personalizada, que com um pouco mais de trabalho poderia ser transplantada em um projeto real. No próximo artigo, vamos encerrar as funções explicando outro conceito relacionado essencial — valores de retorno.

* Anterior
* Menu: Building blocks
* Próxima


Protótipos de objetos - Aprendendo desenvolvimento web

Protótipos de objetos
=====================

* Anterior
* Menu: Objects
* Próxima

Protótipos são o mecanismo pelo qual objetos JavaScript herdam recursos uns dos outros. Neste artigo, explicamos como as cadeias de protótipos funcionam e observamos como a propriedade prototype pode ser usada para adicionar métodos aos construtores existentes.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Entender como funções em JavaScript funcionam, familiaridade com o
 básico de JavaScript (veja
 Primeiros Passos
 e
 Elementos Construtivos), e o básico de Orientação a Objetos em JavaScript (veja
 Introdução a Objetos).
  |
| Objetivo: |
 Entender protótipos de objetos JavaScript, como a cadeia de protótipos
 funciona, e como adicionar novos métodos à propriedade
 *prototype.* |

Uma linguagem baseada em protótipos?
------------------------------------

O JavaScript é frequentemente descrito como uma **linguagem baseada em protótipos** — para fornecer herança, os objetos podem ter um **objeto de protótipo**, que atua como um objeto de modelo do qual herda métodos e propriedades. O objeto de protótipo de um objeto também pode ter um objeto de protótipo, do qual herda métodos e propriedades, e assim por diante. Isso geralmente é chamado de **cadeia de protótipos** e explica por que objetos diferentes têm propriedades e métodos definidos em outros objetos disponíveis para eles.

Bem, para ser exato, as propriedades e os métodos são definidos na propriedade `prototype` nas funções construtoras dos Objetos, não nas próprias instâncias do objeto.

Em JavaScript, é feito um link entre a instância do objeto e seu protótipo (sua propriedade `__proto__`, que é derivada da propriedade `prototype` no construtor), e as propriedades e os métodos são encontrados percorrendo a cadeia de protótipos.

**Nota:** É importante entender que há uma distinção entre o protótipo de um objeto (que está disponível por meio de `Object.getPrototypeOf(obj)`, ou por meio da propriedade `__proto__` ) e a propriedade `prototype` em funções construtoras. O primeiro é a propriedade em cada instância e o último é a propriedade no construtor. Ou seja, `Object.getPrototypeOf(new Foobar())` refere-se ao mesmo objeto que `Foobar.prototype`.

Vejamos um exemplo para tornar isso um pouco mais claro.

Noções básicas sobre objetos de protótipo
-----------------------------------------

Aqui voltaremos ao exemplo em que terminamos de escrever nosso construtor `Person()` — carregamos o exemplo em seu navegador. Se você ainda não o conseguiu trabalhar no último artigo, use nosso exemplo oojs-class-further-exercises.html (veja também o código-fonte).

Neste exemplo, definimos uma função construtora, assim:

```js
function Person(first, last, age, gender, interests) {
  // property and method definitions
  this.first = first;
  this.last = last;
  //...
}
```

Nós criamos então uma instância de objeto como esta:

```js
var person1 = new Person("Bob", "Smith", 32, "male", ["music", "skiing"]);
```

Se você digitar "`person1.`" em seu console JavaScript, você deve ver o navegador tentar concluir automaticamente isso com os nomes de membros disponíveis neste objeto:

![](/pt-BR/docs/Learn/JavaScript/Objects/Object_prototypes/object-available-members.png)

Nesta lista, você verá os membros definidos no construtor de `person1`'s constructor — `Person()` — `name`, `age`, `gender`, `interests`, `bio`, e `greeting`. No entanto, você também verá alguns outros membros — `watch`, `valueOf`, etc — estes estão definidos no objeto de protótipo do `Person()`, que é `Object`.

![](/pt-BR/docs/Learn/JavaScript/Objects/Object_prototypes/mdn-graphics-person-person-object-2.png)

O que acontece se você chamar um método em `person1`, que é realmente definido em `Object`? Por exemplo:

```js
person1.valueOf();
```

Este método — `Object.valueOf()` é herdado por `person1` porque seu construtor é `Person()`, e o protótipo de `Person()` é `Object()`. `valueOf()` retorna o valor do objeto em que é chamado — experimente e veja! Nesse caso, o que acontece é:

* O navegador verifica inicialmente se o objeto `person1` tem um método `valueOf()` disponível nele, conforme definido em seu construtor, `Person()`.
* Se não tem, então o navegador verifica se o objeto (`Object()`) de protótipo do construtor `Person()` tem um método `valueOf()` disponível, então ele é chamado, e tudo está bem!

**Nota:** Queremos reiterar que os métodos e as propriedades **não** são copiados de um objeto para outro na cadeia de protótipos — eles são acessados ao percorrer a cadeia como descrito acima.

**Nota:** Não existe uma maneira oficial de acessar diretamente o objeto protótipo de um objeto — os "links" entre os itens da cadeia são definidos em uma propriedade interna, chamada de `[[prototype]]` na especificação da linguagem JavaScript (veja ECMAScript (en-US)). A maioria dos navegadores modernos, no entanto, tem uma propriedade disponível neles chamada `__proto__` (que é sublinhada em ambos os lados), que contém o objeto de protótipo do construtor do objeto. Por exemplo, tente `person1.__proto__` and `person1.__proto__.__proto__` para ver como a cadeia se parece no código!

Desde ECMAScript 2015 você pode acessar o objeto protótipo de um objeto indiretamente via `Object.getPrototypeOf(obj)`.

A propriedade prototype: Onde os membros herdados são definidos
---------------------------------------------------------------

Então, onde estão as propriedades e os métodos herdados definidos? Se você observar a página de referência do `Object`, verá, à esquerda, um grande número de propriedades e métodos — muito mais do que o número de membros herdados que vimos disponíveis no objeto `person1`. Alguns são herdados e outros não — por que isso acontece?

Como mencionado acima, os herdados são os definidos na propriedade `prototype` (você poderia chamá-lo de um subespaço de nomes) — ou seja, aqueles que começam com `Object.prototype`, e não os que começam com apenas `Object`. O valor da propriedade `prototype` é um objeto, que é basicamente um bucket para armazenar propriedades e métodos que queremos que sejam herdados por objetos mais abaixo na cadeia de protótipos.

Portanto, `Object.prototype.watch()`, `Object.prototype.valueOf()`, etc., estão disponíveis para qualquer tipo de objeto que herda de `Object.prototype`, incluindo novas instâncias de objeto criadas a partir do construtor `Person()`.

`Object.is()`, `Object.keys()`, e outros membros não definidos dentro do bloco `prototype` não são herdados por instâncias de objetos ou tipos de objetos que herdam de `Object.prototype`. Eles são métodos / propriedades disponíveis apenas no próprio construtor `Object()`.

**Nota:** Isso parece estranho — como você pode ter um método definido em um construtor, que é em si uma função? Bem, uma função também é um tipo de objeto — veja a referência do construtor `Function()` se você não acredita em nós.

1. Você pode conferir as propriedades de protótipo existentes para si mesmo — volte ao nosso exemplo anterior e tente inserir o seguinte no console JavaScript:

```js
Person.prototype;
```

2. A saída não mostrará muito porque não definimos nada no protótipo do nosso construtor personalizado! Por padrão, o `prototype` de um construtor sempre começa vazio. Agora tente o seguinte:

```js
Object.prototype;
```

Você verá um grande número de métodos definidos na propriedade `prototype` do `Object`, que estão disponíveis em objetos que herdam `Object`, como mostrado anteriormente.

Você verá outros exemplos de herança de cadeia de protótipos em todo o JavaScript — tente procurar os métodos e propriedades definidos no protótipo dos objetos globais `String`, `Date`, `Number`, e `Array`, por exemplo. Estes todos têm um número de membros definidos em seu protótipo, e é por isso que, por exemplo, quando você cria uma string, como esta:

```js
var myString = "This is my string.";
```

`myString` imediatamente tem vários métodos úteis disponíveis, como `split()`, `indexOf()`, `replace()`, etc.

**Nota:** Vale a pena ler nosso guia mais aprofundado sobre Como usar protótipos em JavaScript, uma vez que você tenha entendido esta seção e queira saber mais. Esta seção é intencionalmente simplificada para tornar esses conceitos um pouco mais fáceis de entender quando você os conhecer pela primeira vez.

**Aviso:** **Importante**: A propriedade `prototype` é uma das partes com o nome mais confuso do JavaScript — você pode pensar que `this` aponta para o objeto de protótipo do objeto atual, mas não (esse é um objeto interno que pode ser acessado por `__proto__`, lembra?) . Em vez disso, `prototype` é uma propriedade que contém um objeto no qual você define os membros que deseja herdar.

Revisitando create()
--------------------

Anteriormente mostramos como o método `Object.create()` pode ser usado para criar uma nova instância de objeto.

1. Por exemplo, tente isso no console JavaScript do seu exemplo anterior:

```js
var person2 = Object.create(person1);
```

2. O que `create()` realmente faz é criar um novo objeto a partir de um objeto de protótipo especificado. Aqui, `person2` está sendo criado usando `person1` como um objeto de protótipo. Você pode verificar isso inserindo o seguinte no console:

```js
person2.__proto__;
```

Isso retornará o person1.

A propriedade do construtor
---------------------------

Toda função de construtor possui uma propriedade prototype cujo valor é um objeto que contém uma propriedade `constructor`. Esta propriedade construtora aponta para a função construtora original. Como você verá na próxima seção, as propriedades definidas na propriedade Person.prototype (ou, em geral, na propriedade prototype de uma função construtora, que é um objeto, conforme mencionado na seção acima) tornam-se disponíveis para todos os objetos de instância criados usando Construtor Person(). Portanto, a propriedade constructor também está disponível para os objetos person1 e person2.

1. Por exemplo, tente estes comandos no console:

```js
person1.constructor;
person2.constructor;
```

Estes devem retornar o construtor `Person()`, pois contém a definição original dessas instâncias.
 Um truque inteligente é que você pode colocar parênteses no final da propriedade do `constructor` (contendo quaisquer parâmetros necessários) para criar outra instância de objeto daquele construtor. O construtor é uma função depois de tudo, então pode ser chamado usando parênteses; você só precisa incluir a palavra-chave `new` para especificar que deseja usar a função como um construtor.
2. Tente isso no console:

```js
var person3 = new person1.constructor("Karen", "Stephenson", 26, "female", [
  "playing drums",
  "mountain climbing",
]);
```

3. Agora tente acessar os recursos do seu novo objeto, por exemplo:

```js
person3.name.first;
person3.age;
person3.bio();
```

Isso funciona bem. Você não precisará usá-lo com frequência, mas pode ser realmente útil quando você deseja criar uma nova instância e não tem uma referência ao construtor original facilmente disponível por algum motivo.

A propriedade do `constructor` tem outros usos. Por exemplo, se você tiver uma instância de objeto e desejar retornar o nome do construtor do qual ela é uma instância, use o seguinte:

```js
instanceName.constructor.name;
```

Tente isso, por exemplo:

```js
person1.constructor.name;
```

**Nota:** O valor de `constructor.name` pode mudar (devido à herança prototípica, ligação, pré-processadores, transpilers, etc.), portanto, para exemplos mais complexos, você desejará usar o operador `instanceof`.

Modificando Protótipos
----------------------

Vamos dar uma olhada em um exemplo de modificação da propriedade `prototype` de uma função construtora — os métodos adicionados ao protótipo estão então disponíveis em todas as instâncias de objeto criadas a partir do construtor. Neste ponto, finalmente adicionaremos algo ao protótipo do nosso construtor `Person()`.

1. Volte para o nosso exemplo de oojs-class-further-exercises.html e faça uma cópia local do código-fonte. Abaixo do JavaScript existente, adicione o seguinte código, que adiciona um novo método à propriedade `prototype` do construtor:

```js
Person.prototype.farewell = function () {
  alert(this.name.first + " has left the building. Bye for now!");
};
```

2. Salve o código e carregue a página no navegador e tente inserir o seguinte na entrada de texto:

```js
person1.farewell();
```

Você deve receber uma mensagem de alerta, mostrando o nome da pessoa, conforme definido dentro do construtor. Isso é realmente útil, mas o que é ainda mais útil é que toda a cadeia de herança foi atualizada dinamicamente, disponibilizando automaticamente esse novo método em todas as instâncias de objeto derivadas do construtor.

Pense nisso por um momento. Em nosso código, definimos o construtor, então criamos um objeto de instância a partir do construtor, então adicionamos um novo método ao protótipo do construtor:

```js
function Person(first, last, age, gender, interests) {
  // property and method definitions
}

var person1 = new Person("Tammi", "Smith", 32, "neutral", [
  "music",
  "skiing",
  "kickboxing",
]);

Person.prototype.farewell = function () {
  alert(this.name.first + " has left the building. Bye for now!");
};
```

Mas o método `farewell()` ainda está disponível na instância do objeto `person1` — seus membros foram atualizados automaticamente para incluir o método `farewell()`.

**Nota:** Se você está tendo problemas para fazer este exemplo funcionar, dê uma olhada no nosso exemplo oojs-class-prototype.html (veja também running live).

Você raramente verá propriedades definidas na propriedade `prototype`, porque elas não são muito flexíveis quando definidas dessa forma. Por exemplo, você poderia adicionar uma propriedade assim:

```js
Person.prototype.fullName = "Bob Smith";
```

Isso não é muito flexível, pois a pessoa pode não ser chamada assim. Seria muito melhor construir o `fullName` fora do `name.first` e `name.last`:

```js
Person.prototype.fullName = this.name.first + " " + this.name.last;
```

No entanto, isso não funciona, pois `this` fará referência ao escopo global nesse caso, não ao escopo da função. Chamar essa propriedade retornaria `undefined undefined`. Isso funcionou bem no método que definimos anteriormente no protótipo porque ele está dentro um escopo de função, que será transferido com sucesso para o escopo da instância do objeto, portanto, você pode definir propriedades constantes no protótipo (ou seja, aquelas que nunca precisam ser alteradas), mas geralmente funciona melhor definir propriedades dentro do construtor.

Na verdade, um padrão bastante comum para mais definições de objetos é definir as propriedades dentro do construtor e os métodos no protótipo. Isso torna o código mais fácil de ler, pois o construtor contém apenas as definições de propriedade e os métodos são divididos em blocos separados. Por exemplo:

```js
// Constructor with property definitions

function Test(a, b, c, d) {
  // property definitions
}

// First method definition

Test.prototype.x = function() { ... };

// Second method definition

Test.prototype.y = function() { ... };

// etc.
```

Esse padrão pode ser visto em ação no exemplo de aplicativo de plano escolar de Piotr Zalewa.

Sumário
-------

Este artigo abrangeu protótipos de objetos JavaScript, incluindo como cadeias de objetos de protótipos permitem que objetos herdem recursos uns dos outros, a propriedade prototype e como ela pode ser usada para adicionar métodos a construtores e outros tópicos relacionados.

No próximo artigo, veremos como você pode implementar a herança de funcionalidade entre dois dos seus próprios objetos personalizados.

* Anterior
* Menu: Objects
* Próxima


Trabalhando com JSON - Aprendendo desenvolvimento web

Trabalhando com JSON
====================

* Anterior
* Menu: Objects
* Próxima

JavaScript Object Notation (JSON) é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript. É comumente usado para transmitir dados em aplicativos da Web (por exemplo, enviar alguns dados do servidor para o cliente, para que possam ser exibidos em uma página da Web ou vice-versa). Você se deparará com isso com bastante frequência, portanto, neste artigo, oferecemos tudo o que você precisa para trabalhar com o JSON usando JavaScript, incluindo a análise do JSON para que você possa acessar os dados dentro dele e criar o JSON.

|  |  |
| --- | --- |
| Pré-requisitos |
 Conhecimento básico em informática, conhecimento básico de HTML e CSS,
 conhecimento básico de JavaScript veja
 Primeiros passos
 e
 Construindo blocos) e o básico de OOJS (veja
 Introdução a objetos (en-US)).
  |
| Objetivo: |
 Para entender como trabalhar com dados armazenados em JSON e criar
 seus próprios objetos JSON.
  |

Não, sério, o que é o JSON?
---------------------------

JSON é um formato de dados baseado em texto seguindo a sintaxe do objeto JavaScript, que foi popularizada por Douglas Crockford. Mesmo que se assemelhe à sintaxe literal do objeto JavaScript, ele pode ser usado independentemente do JavaScript, e muitos ambientes de programação possuem a capacidade de ler (analisar) e gerar JSON

O JSON existe como uma string — útil quando você deseja transmitir dados por uma rede. Ele precisa ser convertido em um objeto JavaScript nativo quando você quiser acessar os dados. Isso não é um grande problema — o JavaScript fornece um objeto JSON global que possui métodos disponíveis para conversão entre os dois.

**Nota:** Converter uma string em um objeto nativo é chamado de análise, enquanto a conversão de um objeto nativo em uma string para que possa ser transmitida pela rede é chamada de *stringification*.

Um objeto JSON pode ser armazenado em seu próprio arquivo, que é basicamente apenas um arquivo de texto com uma extensão de `.json`, e um MIME type (en-US) de `application/json`.

### Estrutura JSON

Conforme descrito acima, um JSON é uma string cujo formato se parece muito com o formato literal do objeto JavaScript. Você pode incluir os mesmos tipos de dados básicos dentro do JSON, como em um objeto JavaScript padrão — strings, números, matrizes, booleanos e outros literais de objeto. Isso permite que você construa uma hierarquia de dados, assim:

```json
{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}
```

Se nós carregássemos esse objeto em um programa JavaScript, analisado em uma variável chamada `superHeroes` por exemplo, poderíamos então acessar os dados dentro dele usando a mesma notação dot / bracket que observamos no artigo básico do objeto JavaScript. Por exemplo:

```js
superHeroes.homeTown;
superHeroes["active"];
```

Para acessar os dados mais abaixo na hierarquia, basta encadear os nomes de propriedades e os índices de array necessários juntos. Por exemplo, para acessar o terceiro superpoder do segundo herói listado na lista de membros, você faria isso:

```js
superHeroes["members"][1]["powers"][2];
```

1. Primeiro temos o nome da variável — `superHeroes`.
2. Por dentro, queremos acessar a propriedade dos `members`, então usamos `["members"]`.
3. `members` contém uma matriz preenchida por objetos. Queremos acessar o segundo objeto dentro da matriz, então usamos `[1]`.
4. Dentro deste objeto, queremos acessar a propriedade `powers`, então usamos `["powers"]`.
5. Dentro da propriedade `powers` está um array contendo os superpoderes do herói selecionado. Nós queremos o terceiro, então nós usamos
 `[2]`.

**Nota:** Nota: Nós fizemos o JSON visto acima disponível dentro de uma variável em nosso exemplo JSONTest.html (veja o código fonte). Tente carregar isso e depois acessar os dados dentro da variável pelo console JavaScript do seu navegador.

### Matrizes como JSON

Acima, mencionamos que o texto JSON basicamente se parece com um objeto JavaScript, e isso é basicamente correto. A razão pela qual dissemos "principalmente certo" é que uma matriz também é válida como JSON, por exemplo:

```json
[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]
```

O código acima é um JSON perfeitamente válido. Você teria que acessar itens de matriz (em sua versão analisada) iniciando com um índice de matriz, por exemplo `[0]["powers"][0]`.

### Outras notas

* O JSON é puramente um formato de dados — contém apenas propriedades, sem métodos.
* JSON requer aspas duplas para serem usadas em torno de strings e nomes de propriedades. Aspas simples não são válidas.
* Mesmo uma única vírgula ou cólon perdidos podem fazer com que um arquivo JSON dê errado e não funcione. Você deve ter o cuidado de validar quaisquer dados que você esteja tentando usar (embora o JSON gerado por computador seja menos provável de incluir erros, desde que o programa gerador esteja funcionando corretamente). Você pode validar o JSON usando um aplicativo como o JSONLint.
* O JSON pode realmente assumir a forma de qualquer tipo de dados que seja válido para inclusão dentro do JSON, não apenas matrizes ou objetos. Por exemplo, uma única string ou número seria um objeto JSON válido.
* Ao contrário do código JavaScript no qual as propriedades do objeto podem estar sem aspas, em JSON, somente strings entre aspas podem ser usadas como propriedades.
Aprendizado ativo: trabalhando por meio de um exemplo de JSON
-------------------------------------------------------------

Então, vamos trabalhar em um exemplo para mostrar como poderíamos usar alguns dados JSON em um site.

### Começando

Para começar, faça cópias locais de nossos arquivos heroes.html e style.css. O último contém alguns CSS simples para estilizar nossa página, enquanto o primeiro contém um HTML muito simples:

```html
<header></header>

<section></section>
```

Mais um elemento `<script>` para conter o código JavaScript que escreveremos neste exercício. No momento, ele contém apenas duas linhas, que pegam referências aos elementos `<header>` e `<section>` e os armazenam em variáveis:

```js
var header = document.querySelector("header");
var section = document.querySelector("section");
```

Disponibilizamos nossos dados JSON em nosso GitHub, emhttps://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

Vamos carregá-lo em nossa página e usar algumas manipulações de DOM nifty para exibi-lo, assim:

![](/pt-BR/docs/Learn/JavaScript/Objects/JSON/json-superheroes.png)

### Obtendo o JSON

Para obter o JSON, vamos usar uma API chamada `XMLHttpRequest` (geralmente chamada de XHR). Esse é um objeto JavaScript muito útil que nos permite fazer solicitações de rede para recuperar recursos de um servidor via JavaScript (por exemplo, imagens, texto, JSON e até trechos de código HTML), o que significa que podemos atualizar pequenas seções de conteúdo sem ter que recarregar todo página. Isso levou a páginas da Web mais responsivas e parece empolgante, mas está além do escopo deste artigo ensinar isso com muito mais detalhes.

1. Para começar, vamos armazenar a URL do JSON que queremos recuperar em uma variável. Adicione o seguinte na parte inferior do seu código JavaScript:

```js
var requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
```

2. Para criar uma solicitação, precisamos criar uma nova instância de objeto de solicitação a partir do construtor `XMLHttpRequest` usando a palavra-chave `new`. Adicione o seguinte abaixo sua última linha:

```js
var request = new XMLHttpRequest();
```

3. Agora precisamos abrir uma nova solicitação usando o método `open()` . Adicione a seguinte linha:

```js
request.open("GET", requestURL);
```

Isso leva pelo menos dois parâmetros — existem outros parâmetros opcionais disponíveis. Nós só precisamos dos dois obrigatórios para este exemplo simples:
    * O método HTTP a ser usado ao fazer a solicitação de rede. Neste caso, `GET` é bom, pois estamos apenas recuperando alguns dados simples.
    * O URL para fazer a solicitação — esta é a URL do arquivo JSON que armazenamos anteriormente.
4. Em seguida, adicione as duas linhas a seguir — aqui estamos definindo o `responseType` (en-US) como JSON, para que o XHR saiba que o servidor retornará o JSON e que isso deve ser convertido nos bastidores em um objeto JavaScript. Em seguida, enviamos a solicitação com o método `send()`:

```js
request.responseType = "json";
request.send();
```

5. A última parte desta seção envolve aguardar a resposta retornar do servidor e, em seguida, lidar com ela. Adicione o seguinte código abaixo do seu código anterior:

```js
request.onload = function () {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
};
```

Aqui estamos armazenando a resposta ao nosso pedido (disponível na propriedade `response` (en-US)) em uma variável chamada `superHeroes`; essa variável agora conterá o objeto JavaScript com base no JSON! Então, estamos passando esse objeto para duas chamadas de função — a primeira preencherá o <`header>` com os dados corretos, enquanto a segunda criará uma ficha de informações para cada herói da equipe e a inserirá na `<section>`.

Envolvemos o código em um manipulador de eventos que é executado quando o evento de carregamento é acionado no objeto de solicitação (consulte `onload` (en-US)) — isso ocorre porque o evento load é acionado quando a resposta é retornada com sucesso; Fazê-lo desta forma garante que `request.response` estará definitivamente disponível quando chegarmos a tentar fazer algo com ele.

### Preenchendo o Cabeçalho

Agora, recuperamos os dados JSON e os convertemos em um objeto JavaScript, vamos usá-lo escrevendo as duas funções mencionadas acima. Primeiro de tudo, adicione a seguinte definição de função abaixo do código anterior:

```js
function populateHeader(jsonObj) {
  var myH1 = document.createElement("h1");
  myH1.textContent = jsonObj["squadName"];
  header.appendChild(myH1);

  var myPara = document.createElement("p");
  myPara.textContent =
    "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"];
  header.appendChild(myPara);
}
```

Nós chamamos o parâmetro `jsonObj`, para nos lembrarmos que esse objeto JavaScript foi originado do JSON. Aqui, primeiro criamos um elemento `<h1>` (en-US) como `createElement()`, definimos seu `textContent` para igualar a propriedade `squadName` do objeto e, em seguida, o adicionamos ao cabeçalho usando `appendChild()`. Em seguida, fazemos uma operação muito semelhante com um parágrafo: criá-lo, definir seu conteúdo de texto e anexá-lo ao cabeçalho. A única diferença é que seu texto é definido como uma string concatenada contendo as propriedades `homeTown` e `formed` do objeto.

### Criando os cartões de informações do herói

Em seguida, adicione a seguinte função na parte inferior do código, que cria e exibe as cartas de super-heróis:

```js
function showHeroes(jsonObj) {
  var heroes = jsonObj["members"];

  for (var i = 0; i < heroes.length; i++) {
    var myArticle = document.createElement("article");
    var myH2 = document.createElement("h2");
    var myPara1 = document.createElement("p");
    var myPara2 = document.createElement("p");
    var myPara3 = document.createElement("p");
    var myList = document.createElement("ul");

    myH2.textContent = heroes[i].name;
    myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity;
    myPara2.textContent = "Age: " + heroes[i].age;
    myPara3.textContent = "Superpowers:";

    var superPowers = heroes[i].powers;
    for (var j = 0; j < superPowers.length; j++) {
      var listItem = document.createElement("li");
      listItem.textContent = superPowers[j];
      myList.appendChild(listItem);
    }

    myArticle.appendChild(myH2);
    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);
    myArticle.appendChild(myList);

    section.appendChild(myArticle);
  }
}
```

Para começar, armazenamos a propriedade `members` do objeto JavaScript em uma nova variável. Esta matriz contém vários objetos que contêm as informações para cada herói.

Em seguida, usamos um loop for para percorrer cada objeto na matriz. Para cada um, nós:

1. Criamos vários novos elementos: um `<article>`, um `<h2>`, três `<p>`s, e um `<ul>`.
2. Definimos o <h2> para conter o `name` do herói atual.
3. Preenchemos os três parágrafos com sua `secretIdentity`, `age`, e uma linha dizendo "Superpoderes:" para introduzir as informações na lista.
4. Armazenamos a propriedade `powers` em outra nova variável chamada `superPowers` — isso contém uma matriz que lista os superpoderes do herói atual.
5. Usamos outro loop `for` para percorrer os superpoderes do herói atual — para cada um criamos um elemento `<li>` colocamos o super poder dentro dele e colocamos o `listItem` dentro do elemento `<ul>` (`myList`) usando `appendChild()`.
6. A última coisa que fizemos foi acrescentar os `<h2>`, `<p>`s, e `<ul>` dentro do `<article>` (`myArticle`), depois acrescentar o `<article>` dentro do `<section>`. A ordem em que as coisas são anexadas é importante, pois essa é a ordem em que elas serão exibidas dentro do HTML.

**Nota:** Se você está com problemas pegue um exemplo para trabalhar, tente nosso código fonte heroes-finished.html (veja isso ao vivo também.)

**Nota:** Se você está tendo problemas para seguir a notação ponto / colchete que estamos usando para acessar o objeto JavaScript, pode ajudar a abrir o arquivo superheroes.json em outra guia ou em seu editor de texto, e consultá-lo enquanto observa nosso JavaScript. Você também pode consultar o artigo sobre conceitos O básico de objetos JavaScript para obter mais informações sobre a notação de pontos e colchetes.

Conversão entre objetos e texto
-------------------------------

O exemplo acima foi simples em termos de acesso ao objeto JavaScript, porque definimos a solicitação XHR para converter a resposta JSON diretamente em um objeto JavaScript usando:

```js
request.responseType = "json";
```

Mas às vezes não temos muita sorte — às vezes recebemos uma string JSON bruta e precisaremos convertê-la em um objeto por conta própria. E quando queremos enviar um objeto JavaScript pela rede, precisamos convertê-lo em JSON (uma string) antes de enviá-lo. Felizmente, esses dois problemas são tão comuns no desenvolvimento da Web que um objeto JSON interno está disponível nos navegadores, o que contém os dois métodos a seguir:

* `parse()`: Aceita uma string JSON como um parâmetro e retorna o objeto JavaScript correspondente.
* `stringify()`: Aceita um objeto como um parâmetro e retorna o formato equivalente de string JSON.

Você pode ver o primeiro em ação em nosso exemplo heroes-finished-json-parse.html (veja o source code) — isso faz exatamente a mesma coisa que o exemplo que construímos anteriormente, exceto pelo fato de configurarmos o XHR para retornar texto JSON bruto, em seguida, usado `parse()` para convertê-lo em um objeto JavaScript real. O trecho principal do código está aqui:

```js
request.open("GET", requestURL);
request.responseType = "text"; // now we're getting a string!
request.send();

request.onload = function () {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
};
```

Como você pode imaginar, `stringify()` funciona da maneira oposta. Tente inserir as seguintes linhas no console JavaScript de seu navegador, uma por uma, para vê-lo em ação:

```js
var myJSON = { name: "Chris", age: "38" };
myJSON;
var myString = JSON.stringify(myJSON);
myString;
```

Aqui estamos criando um objeto JavaScript, em seguida, verificando o que ele contém, convertendo-o em uma string JSON usando `stringify()` — salvando o valor de retorno em uma nova variável — e, em seguida, verificando-o novamente.

Sumário
-------

Neste artigo, fornecemos um guia simples para usar o JSON em seus programas, incluindo como criar e analisar o JSON e como acessar dados bloqueados nele. No próximo artigo começaremos a analisar o JavaScript orientado a objetos.

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

* Objeto JSON página de refência
* Objeto XMLHttpRequest página de refência
* Usando XMLHttpRequest
* Métodos de requisição HTTP
* Site oficial JSON com o link para o padrão ECMA
* Anterior
* Menu: Objects
* Próxima
Nesse módulo
------------

* O básico de objetos
* Orientação a objetos em JavaScript para iniciantes
* Protótipos de objetos
* Herança em JavaScript
* Trabalhando com dados em JSON
* Prática de construção de objetos
* Adicionando melhorias para nossa demo bolas saltitantes


O básico sobre objetos JavaScript - Aprendendo desenvolvimento web

O básico sobre objetos JavaScript
=================================

* Menu: Objects
* Próxima

Neste artigo, veremos a sintaxe fundamental de objetos JavaScript e revisitaremos alguns recursos JavaScript vistos anteriormente no curso, reiterando o fato de que muitos dos recursos que você já utilizou são objetos.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Interação básica com o computador, entendimento básico de HTML e CSS,
 familiaridade com o básico de JavaScript (ver
 Primeiros passos
 e
 Elementos construtivos).
  |
| Objetivo: |
 Entender a teoria básica por trás da programação orientada a objetos,
 como isso se relaciona com o JavaScript ("quase tudo é objeto"), e como
 começar a trabalhar com objetos JavaScript.
  |

Objeto, noções básicas
----------------------

Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções — que são chamadas de propriedades e métodos quando estão dentro de objetos). Vamos trabalhar com um exemplo para entender como eles são.

Para começar, faça uma cópia do nosso arquivo oojs.html. Isto contém muito pouco — um elemento `<script>` para escrevermos nosso código-fonte. Vamos usar isto como base para explorar a sintaxe básica do objeto. Ao trabalhar com este exemplo, você deve ter seu console de ferramentas de desenvolvedor JavaScript aberto e pronto para digitar alguns comandos.

Como acontece com muitas coisas em JavaScript, a criação de um objeto geralmente começa com a definição e a inicialização de uma variável. Tente digitar o código a seguir no arquivo que você baixou, salve e atualize:

```js
var pessoa = {};
```

Se você inserir `pessoa` no seu console JS e pressionar o botão, deverá obter o seguinte resultado:

```js
[object Object]
```

Parabéns, você acabou de criar seu primeiro objeto. Tarefa concluída! Mas este é um objeto vazio, então não podemos fazer muita coisa com isso. Vamos atualizar nosso objeto para ficar assim:

```js
var pessoa = {
  nome: ["Bob", "Smith"],
  idade: 32,
  sexo: "masculino",
  interesses: ["música", "esquiar"],
  bio: function () {
    alert(
      this.nome[0] +
        " " +
        this.nome[1] +
        " tem " +
        this.idade +
        " anos de idade. Ele gosta de " +
        this.interesses[0] +
        " e " +
        this.interesses[1] +
        ".",
    );
  },
  saudacao: function () {
    alert("Oi! Eu sou " + this.nome[0] + ".");
  },
};
```

Depois de salvar e atualizar, tente inserir alguns dos itens a seguir no console JavaScript no devtools do seu navegador:

```js
pessoa.nome;
pessoa.nome[0];
pessoa.idade;
pessoa.interesses[1];
pessoa.bio();
pessoa.saudacao();
```

Agora você tem alguns dados e funcionalidades dentro de seu objeto e é capaz de acessá-los com uma sintaxe simples e agradável!

**Nota:** Se você está tendo problemas para fazer isto funcionar, tente comparar seu código com a nossa versão — veja oojs-finished.html (ou veja um exemplo funcionando). O exemplo lhe dará uma tela em branco, mas tudo bem — novamente, abra seu devtools e tente digitar os comandos acima para ver a estrutura do objeto.

Então, o que está acontecendo? Bem, um objeto é composto de vários membros, cada um com um nome (ex.: `nome` e `idade` vistos acima), e um valor (ex.: `['Bob', 'Smith']` e `32`). Cada par nome/valor deve ser separado por uma vírgula e o nome e valor, em cada caso, separados por dois pontos. A sintaxe sempre segue esse padrão:

```js
var nomeDoObjeto = {
  nomeMembro1: valorMembro1,
  nomeMembro2: valorMembro2,
  nomeMembro3: valorMembro3,
};
```

O valor de um membro do objeto pode ser praticamente qualquer coisa. Em nosso objeto pessoa, temos uma string, um número, dois arrays e duas functions. Os primeiros quatro são data items (dados) e são referenciados como **propriedades** do objeto. Enquanto os dois últimos itens são funções que permitem que o objeto faça algo com esses dados. São chamados de **métodos** do objeto.

Um objeto como esse é chamado de **objeto literal** — ao pé da letra, escrevemos o conteúdo do objeto conforme o criamos. Isto está em contraste com objetos instanciados de classes, que veremos mais adiante.

É muito comum criar um objeto usando um objeto literal quando você deseja transferir uma série de itens de dados relacionados estruturados de alguma maneira, por exemplo, enviando uma solicitação para o servidor para ser colocado em um banco de dados. Enviar um único objeto é muito mais eficiente do que enviar vários itens individualmente, e é mais fácil trabalhar com um array, quando você deseja identificar itens individuais pelo nome.

Notação de ponto
----------------

Acima, você acessou as propriedades de objetos e métodos usando **notação de ponto**. O objeto nome (pessoa) atua como **namespace** (espaço de nomes) — ele deve ser digitado primeiro para que você acesse qualquer coisa **encapsulada** dentro do objeto. Depois você escreve um ponto, então o item que quer acessar — isso pode ser o nome de uma simples propriedade, um item de um array ou a chamada para um dos métodos do objeto, por exemplo:

```js
pessoa.idade;
pessoa.interesse[1];
pessoa.bio();
```

### Sub-namespaces

É até possível fazer o valor de um membro de um objeto ser outro objeto. Por exemplo, tente alterar o nome do membro de:

```js
nome: ['Bob', 'Smith'],
```

para

```js
nome : {
  primeiro: 'Bob',
  ultimo: 'Smith'
},
```

Aqui estamos efetivamente criando um **sub-namespace**. Parece difícil, mas não é — para acessar esses itens você apenas precisa encadear mais um passo ao final de outro ponto. Tente isso aqui no console:

```js
pessoa.nome.primeiro;
pessoa.nome.ultimo;
```

**Importante**: Nesse ponto você também precisará revisar seus métodos e mudar quaisquer instâncias de

```js
nome[0];
nome[1];
```

para

```js
nome.primeiro;
nome.ultimo;
```

Caso contrário seus métodos não funcionarão.

Notação de colchetes
--------------------

Há outra forma de acessar propriedades do objeto — usando notação de colchetes. Ao invés desses:

```js
pessoa.idade;
pessoa.nome.primeiro;
```

Você pode usar:

```js
pessoa["idade"];
pessoa["nome"]["primeiro"];
```

Fica muito parecido com a maneira que acessamos itens de um array, e é basicamente a mesma coisa, só que ao invés de usarmos um número de índice para selecionar um item, usamos o nome associado a cada valor. Não é por menos que objetos às vezes são chamados de **arrays associativos** — eles mapeiam strings a valores do mesmo modo que arrays mapeiam números a valores.

Setando membros do objeto
-------------------------

Até agora nós apenas procuramos receber (ou **apanhar**) membros de objetos — podemos também **setar** (atualizar) o valor de membros de objetos simplesmente declarando o membro que queremos setar (usando notação de ponto ou colchete), tipo assim:

```js
pessoa.idade = 45;
pessoa["nome"]["ultimo"] = "Cratchit";
```

Tente escrever as linhas acima e então apanhar seus membros novamente para ver como mudaram. Assim:

```js
pessoa.idade;
pessoa["nome"]["ultimo"];
```

Não podemos apenas atualizar valores existentes de propriedades e métodos; podemos também criar membros completamente novos. Tente isso aqui no console:

```js
pessoa["olhos"] = "castanho";
pessoa.despedida = function () {
  alert("Adeus a todos!");
};
```

Podemos testar nossos novos membros:

```js
pessoa["olhos"];
pessoa.despedida();
```

Um aspecto útil de notação de colchetes é que ela pode ser usadada não apenas para setar valores dinamicamente, mas também nomes de membros. Vamos dizer que queremos que usuários possam armazenar tipos de valores personalizados em seus dados de 'pessoa', digitando o nome e o valor do membro em dois inputs de texto. Podemos obter esses valores dessa forma:

```js
var myDataName = nameInput.value;
var myDataValue = nameValue.value;
```

Podemos, então, adicionar esse novo nome e valor ao objeto pessoa assim:

```js
pessoa[myDataName] = myDataValue;
```

Para testar isso, tente adicionar as seguinte linhas em seu código, abaixo do fechamento da chaves do objeto `pessoa` :

```js
var myDataName = "altura";
var myDataValue = "1.75m";
pessoa[myDataName] = myDataValue;
```

Agora tente salvar e atualizar, entrando o seguinte no seu input de texto:

```js
pessoa.altura;
```

Adicionar uma propriedade a um objeto usando o método acima não é possível com a notação ponto, que só aceita um nome de membro literal, não aceita valor de variável apontando para um nome.

O que é o "this"?
-----------------

Você pode ter reparado algo levemente estranho em nossos métodos. Olhe esse aqui, por exemplo:

```js
saudacao: function(){
  alert("Oi! Meu nome é " + this.nome.primeiro + ".");
}
```

Você deve estar se perguntando o que é o "this". A palavra-chave `this` se refere ao objeto atual em que o código está sendo escrito — nesse caso o `this` se refere a `pessoa`. Então por que simplesmente não escrever `pessoa`? Como verá no artigo Orientaçã a objeto em JavaScript para iniciantes, quando começamos a criar funções construtoras, etc, o `this` é muito útil — sempre lhe assegurará que os valores corretos estão sendo usados quando o contexto de um membro muda (exemplo: duas instâncias diferentes do objeto `pessoa` podem ter diferentes nomes, mas vão querer usar seu próprio nome ao usar a saudação).

Vamos ilustrar o que queremos dizer com um par de objetos pessoa:

```js
var pessoa1 = {
  nome: "Chris",
  saudacao: function () {
    alert("Oi! Meu nome é " + this.nome + ".");
  },
};

var pessoa2 = {
  nome: "Brian",
  saudacao: function () {
    alert("Oi! Meu nome é " + this.nome + ".");
  },
};
```

Neste caso, `pessoa1.saudacao()` gerará "Oi! Meu nome é Chris."; No entanto, `pessoa2.saudacao()` retornará "Oi! Meu nome é Brian.", mesmo que os códigos dos métodos sejam idênticos. Como dissemos antes, o `this` é igual ao código do objeto dentro dele — não é exatamente útil quando estamos escrevendo objetos literais na mão, mas é realmente incrível quando adicionamos objetos gerados dinamicamente (por exemplo usando **construtores**). Tudo ficará mais claro mais para frente.

Você vem usando objetos o tempo todo
------------------------------------

Enquanto passava por esses exemplos, você provavelmente andou pensando que essa notação de ponto que estamos usando é muito familiar. Isso é porque você vem usando isso durante todo o curso! Todas as vezes que trabalhamos num exemplo que usa uma API interna do navegador ou objetos Javascript, estamos usando objetos, porque esses recursos são construídos usando exatamente o mesmo tipo de estrutura de objetos que vimos aqui, embora mais complexos do que nossos exemplos básicos.

Então quando usamos métodos de strings como:

```js
minhaString.split(",");
```

Estamos usando um método disponível na instância da class `String`. Toda vez que você cria uma string em seu código, essa string é automaticamente criada como uma instância de `String`, e, portanto, possui vários métodos e propriedades comuns que estão disponíveis para ela.

Quando você acessa o document object model usando linhas como estas:

```js
var minhaDiv = document.createElement("div");
var meuVideo = document.querySelector("video");
```

Você está usando métodos disponíveis na instância da class `Document`. Cada vez que a página é recarrecada, uma instância de `Document` é criada, chamando `document`, que representa a estrutura inteira da página, conteúdo e outros recursos como sua URL. Novamente, isso significa que ela tem vários métodos e propriedades disponíveis nela.

O mesmo pode ser dito de basicamente qualquer outro objeto/API embutido que esteja usando — `Array`, `Math`, etc.

Note que Objetos/APIs embutidos nem sempre criam instâncias de objetos automaticamente. Por exemplo, a API de Notificações (en-US) — que permite que navegadores modernos disparem notificações de sistema — requerem que você inicialize uma nova instância de objeto usando o construtor para cada notificação que queira disparar. Tente entrar o seguinte no seu console Javascript:

```js
var minhaNotificacao = new Notification("Hello!");
```

Novamente, olharemos constructores num artigo mais na frente.

**Nota:** É útil pensar sobre como os objetos se comunicam **passando mensagens** - quando um objeto precisa de outro objeto para realizar algum tipo de ação, ele freqüentemente enviará uma mensagem para outro objeto através de um de seus métodos e aguardará uma resposta, que reconhecemos como um valor de retorno.

Teste suas habilidades !
------------------------

Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante — veja Test your skills: Object basics (en-US).

Resumo
------

Parabéns, você chegou ao final de nosso primeiro artigo sobre objetos JS - agora você deve ter uma boa ideia de como trabalhar com objetos em Javascript - incluindo criar seus próprio objetos simples. Você também deve perceber que objetos são muito úteis como estruturas para armazenar dados e funcionalidades relacionadas - se tentar rastrear todas as propriedades e métodos do nosso objeto `pessoa` como variáveis e funções separadas, isso seria ineficiente e frustrante e correríamos o risco de termos outras variáveis e funções com o mesmo nome. Objetos nos permite manter informações guardadas em segurança em seus próprios pacotes, fora de perigo.

No próximo artigo vamos começar a ver a teoria de programação orientada a objetos (OOP) e em como suas técnicas podem ser usadas em Javascript.

* Menu: Objects
* Próxima
Nesse módulo
------------

* Noções Básicas de Objetos
* Orientação a objetos Javascript para iniciantes
* Protótipos de Objetos
* Herança no Javascript
* Trabalhando com JSON
* Prática de construção de Objetos
* Adicionando recursos à nossa demonstração de bolas pulantes