Um primeiro mergulho no JavaScript - Aprendendo desenvolvimento web

Um primeiro mergulho no JavaScript
==================================

* Anterior
* Menu: First steps
* Próxima

Agora você poderá aprender um pouco sobre a Teoria do Javascript e o que você poderá fazer com ele. Nós vamos lhe fornecer aqui um Curso rápido sobre as características básicas do JavaScript através de um tutorial completamente prático. Você irá construir um simples jogo de "Adivinhe o número", passo a passo.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimentos básicos de informática, uma compreensão básica de HTML e
 CSS, uma compreensão do que é JavaScript.
  |
| Objetivo: |
 Ter um primeiro bit de experiência em escrever um pouco de JavaScript,
 e adquirir pelo menos uma compreensão básica do que envolve escrever
 um programa em JavaScript.
  |

Nós não esperamos que você entenda todo o código imediatamente - Apenas queremos ensinar-lhe os melhores conceitos por enquanto e dar a você uma idéia de como o JavaScript (e outras linguagens de programação) funcionam. Em artigos posteriores você vai rever todos esses recursos com muito mais detalhes!

**Nota:** Muitos dos recursos de código que você verá no JavaScript são iguais aos de outra linguagem de programação - funções, loops, etc. A sintaxe do código parece diferente, mas os conceitos ainda são praticamente os mesmos.

Pensando como um Programador
----------------------------

Uma das coisas mais difíceis de aprender na programação não é a sintaxe que você precisa aprender, mas como aplicá-la para resolver problemas do mundo real. Você precisa começar a pensar como um programador - isso geralmente envolve olhar para as descrições do que seu programa precisa fazer e analisar como eles podem ser aplicados na solução real (prática), quais recursos de código são necessários para alcançar esse objetivo, e como fazê-los trabalhar em conjunto.

Isso requer um mistura de trabalho duro, experiência com a sintaxe de programação utilizada e prática, além de um pouco de criatividade, é claro. Quanto mais você programa, melhor programador se torna. Nós não prometemos transformar seu cérebro em um "cérebro de programador" em 5 minutos, mas vamos te dar todas as oportunidades para pensar na prática como um programador ao longo deste curso.

Com isso em mente, vejamos o exemplo que estaremos construindo neste artigo e analisaremos o processo geral de dissecá-lo em tarefas tangíveis.

Exemplo — Jogo adivinhe um número
---------------------------------

Neste artigo vamos mostrar a você como construir este simples jogo, que pode ser visto abaixo:
```

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Jogo adivinhe o número</title>
    <style>
 html {
 font-family: sans-serif;
 }

 body {
 width: 50%;
 max-width: 800px;
 min-width: 480px;
 margin: 0 auto;
 }

 .lastResult {
 color: white;
 padding: 3px;
 }
 </style>
  </head>

  <body>
    <h1>Jogo Adivinhe um número</h1>
    <p>
      Selecionamos um número aleatório entre 1 e 100. Veja se consegue adivinhar
      em 10 chances ou menos. Nós lhe diremos se seu palpite está com valor alto
      ou baixo.
    </p>
    <div class="form">
      <label for="guessField">Digite seu palpite: </label
 ><input type="text" id="guessField" class="guessField" />
      <input type="submit" value="Enviar palpite" class="guessSubmit" />
    </div>
    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>
  </body>
  <script>
 // Seu JavaScipt vem aqui
 var randomNumber = Math.floor(Math.random() \* 100) + 1;
 var guesses = document.querySelector(".guesses");
 var lastResult = document.querySelector(".lastResult");
 var lowOrHi = document.querySelector(".lowOrHi");
 var guessSubmit = document.querySelector(".guessSubmit");
 var guessField = document.querySelector(".guessField");
 var guessCount = 1;
 var resetButton;

 function checkGuess() {
 var userGuess = Number(guessField.value);
 if (guessCount === 1) {
 guesses.textContent = "Palpites anteriores: ";
 }

 guesses.textContent += userGuess + " ";

 if (userGuess === randomNumber) {
 lastResult.textContent = "Parabéns! Seu número está certo!";
 lastResult.style.backgroundColor = "green";
 lowOrHi.textContent = "";
 setGameOver();
 } else if (guessCount === 10) {
 lastResult.textContent = "!!!FIM DE JOGO!!!";
 lowOrHi.textContent = "";
 setGameOver();
 } else {
 lastResult.textContent = "Errado!";
 lastResult.style.backgroundColor = "red";
 if (userGuess < randomNumber) {
 lowOrHi.textContent = "Seu palpite está muito baixo!";
 } else if (userGuess > randomNumber) {
 lowOrHi.textContent = "Seu palpite está muito alto!";
 }
 }

 guessCount++;
 guessField.value = "";
 }

 guessSubmit.addEventListener("click", checkGuess);

 function setGameOver() {
 guessField.disabled = true;
 guessSubmit.disabled = true;
 resetButton = document.createElement("button");
 resetButton.textContent = "Iniciar novo jogo";
 document.body.appendChild(resetButton);
 resetButton.addEventListener("click", resetGame);
 }

 function resetGame() {
 guessCount = 1;
 var resetParas = document.querySelectorAll(".resultParas p");
 for (var i = 0; i < resetParas.length; i++) {
 resetParas[i].textContent = "";
 }

 resetButton.parentNode.removeChild(resetButton);
 guessField.disabled = false;
 guessSubmit.disabled = false;
 guessField.value = "";
 guessField.focus();
 lastResult.style.backgroundColor = "white";
 randomNumber = Math.floor(Math.random() \* 100) + 1;
 }
 </script>
</html>
```

Vá em frente e jogue por um tempo para se familiarizar com o jogo antes de continuar.

Vamos imaginar que o seu chefe te deu as seguintes diretrizes para criar este jogo:

>
> Quero que você crie um jogo simples do tipo adivinhe um número. Ele deve gerar um número aleatório de 1 a 100, depois desafiar o jogador a adivinhar o número em 10 rodadas. A cada rodada deve ser dito ao jogador se ele está certo ou errado, se estiver errado, deve ser dito se o palpite é muito baixo ou muito alto. Também deve ser mostrado ao jogador os números que ele tentou adivinhar anteriormente. O jogo termina se o jogador acertar o número ou acabarem o número de tentativas. Quando o jogo acabar, deve ser dado ao jogador a opção de jogar novamente.
>
>
>

Olhando para o enunciado, a primeira coisa que devemos fazer é quebrá-lo em pequenas tarefas, da forma mais parecida com o pensamento de um programador quanto possível:

1. Gerar um número aleatório entre 1 e 100.
2. Gravar o número do turno que o jogador está. Iniciar em 1.
3. Dar ao jogador uma forma de adivinhar o número.
4. Após a tentativa ter sido submetida, primeiro gravar em algum lugar para que o usuário possa ver as tentativas anteriores.
5. Depois, verificar se o palpite está correto.
6. Se estiver correto:
    1. Escrever mensagem de parabéns.
    2. Impedir que o jogador insira mais respostas (isso pode bugar o jogo).
    3. Mostrar controle que permita ao jogador reiniciar o jogo.
7. Se o palpite estiver errado e o jogador ainda tem turnos sobrando:
    1. Dizer ao jogador que ele está errado.
    2. Permitir que ele insira outra resposta.
    3. Incrementar o número do turno em 1.
8. Se o jogador está errado mas não tem turnos sobrando:
    1. Dizer ao jogador que o jogo acabou.
    2. Impedir que o jogador insira mais respostas (isso pode bugar o jogo).
    3. Mostrar controle que permita ao jogador reiniciar o jogo.
9. Quando reiniciar, tenha certeza de resetar todas as variáveis e a interface do jogo, então volte para o passo 1.

Então vamos em frente, olhando como podemos transformar esses passos em código, construindo esse exemplo e explorando as ferramentas do JavaScript ao longo do caminho.

### Configuração Inicial

Para iniciar este tutorial, gostaríamos que você fizesse uma cópia do arquivo jogo-adivinhe-o-numero-inicio.html (ver demonstração). Abra-o em um editor de texto e também no seu browser. No momento você vai apenas ver um simples cabeçalho, parágrafo de instruções e um formulário para entrada de informações, mas o formulário não fará nada por enquanto.

O lugar em que começaremos a escrever nosso código será dentro da tag `<script>` na parte inferior do HTML:

```html
<script>
 // Seu JavaScript vai aqui
</script>
```

### Adicionando variáveis para armazenar nossos dados

Vamos começar. Primeiramente, adicione as seguintes linhas na sua tag `<script>` :

```js
var numeroAleatorio = Math.floor(Math.random() \* 100) + 1;

var palpites = document.querySelector(".palpites");
var ultimoResultado = document.querySelector(".ultimoResultado");
var baixoOuAlto = document.querySelector(".baixoOuAlto");

var envioPalpite = document.querySelector(".envioPalpite");
var campoPalpite = document.querySelector(".campoPalpite");

var contagemPalpites = 1;
var botaoReinicio;
```

Aqui estamos setando as variáveis que precisamos para guardar os dados que nosso programa irá utilizar. Variáveis são basicamente recipientes para valores (como números, ou strings ou textos). Variáveis são criadas com a palavra-chave `var` seguida de um nome para sua variável. Você pode atribuir um valor para sua variável com um sinal de igual (`=`) seguido do valor que você quer dar a ela.

No nosso exemplo:

* À primeira variável — `numeroAleatorio` — é atribuído um número aleatório entre 1 e 100, calculado usando um algoritmo matemático.
* As próximas três variáveis são criadas para guardar uma referência para os parágrafos resultantes em nosso HTML, e são usadas para inserir valores nos parágrafos no código:

```html
<p class="palpites"></p>
<p class="ultimoResultado"></p>
<p class="baixoOuAlto"></p>
```

* As próximas duas variáveis armazenam referências para o campo de texto e o botão de envio e são usados para controlar o envio do palpite.

```html
<label for="campoPalpite">Digite seu palpite: </label
><input type="text" id="campoPalpite" class="campoPalpite" />
<input type="submit" value="Enviar palpite" class="envioPalpite" />
```

* As últimas duas variáveis (contagemPalpites e botaoReinicio) são usadas para armazenar a contagem dos palpites do usuário, e o outro é uma referência para o botão de reset, que não existe ainda (mas irá existir).

**Nota:** Você irá aprender muito mais sobre variáveis a partir do próximo artigo.

### Funções

Em seguida, adicione o seguinte código abaixo do JavaScript anterior:

```js
function conferirPalpite() {
  alert("Eu sou um placeholder");
}
```

Funções são blocos reutilizáveis de código que você pode escrever uma vez e executá-lo de novo e de novo, eliminando a necessidade de repetir o código todas as vezes. Isso é realmente útil. Há várias formas de se definir funções, mas, por agora, vamos nos concentrar em um tipo simples. Aqui nós definimos uma função usando a palavra chave `function`, seguida de um nome, com parênteses colocados na sequência. Depois disso nós colocamos duas chaves (`{ }`). Dentro das chaves vai todo o código que queremos executar sempre que chamarmos a função.

O código é executado digitando o nome da função seguido pelos parênteses.

Tente salvar o seu código agora e atualizá-lo no navegador.

Vá até o console JavaScript, e insira a seguinte linha:

```js
conferirPalpite();
```

Você deverá ver um alerta aparecer dizendo "Eu sou um placeholder"; nós definimos uma função em nosso código que cria um alerta a qualquer hora em que a chamarmos.

**Nota:** Você irá aprender muito mais sobre funções mais tarde no curso.

### Operadores

Os operadores JavaScript nos permite realizar testes, fazer cálculos matemáticos, unir sequências de texto, e outras coisas do tipo.

Vamos salvar nosso código e atualizar a página exibida em nosso navegador. Abra o console JavaScript se você ainda não o tiver aberto, para que possamos digitar os exemplos mostrados abaixo — digite cada um exatamente como mostrado na coluna "Exemplo", pressionando Return/Enter na sequência, e veja quais resultados são retornados. Se você não tiver fácil acesso às ferramentas de desenvolvimento do navegador você pode sempre utilizar o console embutido simples, como no exemplo abaixo:
```

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

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

 body {
 max-width: 700px;
 }

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

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

 .output p {
 width: 100%;
 }

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

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

  <script>
 var geval = eval;

 function createInput() {
 var inputDiv = document.createElement("div");
 var inputPara = document.createElement("p");
 var inputForm = document.createElement("input");

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

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

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

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

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

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

 createInput();
 }

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

Primeiro vamos ver os operadores matemáticos, como por exemplo:

| Operador | Nome | Exemplo |
| --- | --- | --- |
| `+` | Adição | `6 + 9` |
| `-` | Subtração | `20 - 15` |
| `*` | Multiplicação | `3 * 7` |
| `/` | Divisão | `10 / 5` |

Você também pode usar o operador `+` para unir sequências de texto (isso é chamado de concatenação em programação). Tente inserir as seguintes linhas:

```js
var nome = "Bingo";
nome;
var ola = " diz olá!";
ola;
var cumprimento = nome + ola;
cumprimento;
```

Há também alguns atalhos para operadores disponíveis, chamados de operadores de atribuição ampliada (ou atribuição composta). Por exemplo, se você quer adicionar uma nova sequência de texto à uma existente e retornar o resultado, você pode fazer o seguinte:

```js
nome += " diz olá!";
```

Isso é equivalente a:

```js
nome = nome + " diz olá!";
```

Quando estamos rodando testes de verdadeiro/falso (por exemplo, condicinais internas — veja abaixo, usamos operadores de comparação, por exemplo:

| Operador | Nome | Exemplo |
| --- | --- | --- |
| `===` | Igualdade estrita (é estritamente o mesmo?) | `5 === 2 + 4` |
| `!==` | Não-igualdade (não é o mesmo?) | `'Chris' !== 'Ch' + 'ris'` |
| `<` | Menor que | `10 < 6` |
| `>` | Maior que | `10 > 20` |

### Condicionais

Voltando à nossa função `conferirPalpite()`, imagino que seja seguro dizer que não queremos que ela apenas exiba uma mensagem de teste (placeholder). Nós queremos verificar se o palpite do jogador está correto ou não, e responder apropriadamente.

Neste ponto, substitua sua função `conferirPalpite()` atual por esta versão:

```js
function conferirPalpite() {
  var palpiteUsuario = Number(campoPalpite.value);
  if (contagemPalpites === 1) {
    palpites.textContent = "Palpites anteriores: ";
  }
  palpites.textContent += palpiteUsuario + " ";

  if (palpiteUsuario === numeroAleatorio) {
    ultimoResultado.textContent = "Parabéns! Você acertou!";
    ultimoResultado.style.backgroundColor = "green";
    baixoOuAlto.textContent = "";
    configFimDeJogo();
  } else if (contagemPalpites === 10) {
    ultimoResultado.textContent = "!!!FIM DE JOGO!!!";
    baixoOuAlto.textContent = "";
    configFimDeJogo();
  } else {
    ultimoResultado.textContent = "Errado!";
    ultimoResultado.style.backgroundColor = "red";
    if (palpiteUsuario < numeroAleatorio) {
      baixoOuAlto.textContent = "Seu palpite está muito baixo!";
    } else if (palpiteUsuario > numeroAleatorio) {
      baixoOuAlto.textContent = "Seu palpite está muito alto!";
    }
  }

  contagemPalpites++;
  campoPalpite.value = "";
  campoPalpite.focus();
}
```

Isso é bastante código — ufa! Vamos abordar cada seção e explicar o que faz.

* A primeira linha (linha 2 no código acima) declara uma variável chamada `palpiteUsuario` e define seu valor igual ao valor inserido pelo jogador no campo de texto. Nós também rodamos esse valor através do método embutido `Number()`, apenas para ter certeza de que o valor inserido é um número.
* Em seguida, encontramos nosso primero bloco de código condicional (linhas 3–5 no código acima). Um bloco de código condicional lhe permite executar código seletivamente, dependendo se uma condição é verdadeira ou não. Se parece um pouco com uma função, mas não é. A forma mais simples de um bloco condicional começa com a palavra chave `if`, depois os parênteses, depois as chaves. Dentro dos parênteses nós incluímos um teste. Se o teste retornar `true`(verdadeiro), o código dentro das chaves é executado. Caso contrário, não é executado, e seguimos para a próxima parte do código. Neste caso, o teste está verificando se a variável `contagemPalpites` é igual a `1` (isto é, se essa é ou não a primeira tentativa do jogador):

```js
contagemPalpites === 1;
```

Se a condição for verdadeira, nós tornamos o conteúdo do parágrafo de palpites, `<p class="palpites"></p>` igual a "Palpites anteriores: ". Caso contrário, o texto não é exibido.
* A linha 6 acrescenta o valor atual de `palpiteUsuario` ao final do parágrafo `palpites`, mais um espaço em branco para que haja espaçamento entre cada palpite mostrado.
* O próximo bloco (linhas 8–24 acima) fazem as seguintes conferências:
    + O primeiro `if(){ }` confere se o palpite do jogador é igual ao número aleatório (`numeroAleatorio`) definido no topo do nosso JavaScript. Se for, o jogador adivinhou corretamente o número e venceu o jogo. Então mostramos ao jogador uma mensagem de parabenização com uma agradável cor verde, limpamos o conteúdo do parágrado que informa sobre o palpite ser alto ou baixo `<p class="baixoOuAlto"></p>`, e executamos uma função chamada `configFimDeJogo()`, que iremos discutir mais tarde.
    + Agora nós encadeamos outro teste ao final deste anterior usando uma estrutura `else if(){ }`. Este confere se o palpite do jogador é sua última tentativa. Se for, o programa faz o mesmo que no bloco anterior, porém com uma mensagem de fim de jogo ao invés do texto de parabenização.
    + O bloco final encadeado ao final do código (`else { }`) contém código que só é executado se nenhum dos outros dois testes retornar verdadeiro (ou seja, o jogador não acertou o número, porém ainda tem mais tentativas restantes). Neste caso nós dizemos a ele que está errado, e então rodamos outro teste condicional para checar se o palpite foi maior ou menor do que a resposta certa, exibindo então uma mensagem apropriada para informá-lo se foi maior ou menor.
* As próximas três linhas da função (linhas 26–28) nos deixa preparados para o próximo palpite ser submetido. Nós somamos 1 à variável `contagemPalpites` para que o jogador use sua tentativa (`++` é uma operação de incremento — incrementa em 1), e o campo de texto do formulário de inserção seja esvaziado e focado novamente, pronto para que o próximo palpite seja inserido.
### Eventos

Neste ponto temos uma função `conferirPalpite()` bem implementada, mas ela não irá fazer nada pois nós não a chamamos ainda. Idealmente nós queremos que ela seja acionada quando o botão "Enviar palpite" for pressionado, e para fazer isso precisamos usar um evento. Eventos são ações que acontencem no navegador, como um botão sendo clicado, ou uma página carregada, ou um vídeo tocando; ações as quais podemos responder executando blocos de código. Os construtores que monitoram os acontecimentos de eventos são chamados de **event listeners**, e os blocos de código executados em resposta ao acontecimento do evento são chamados de **event handlers**.

Adicione a seguinte linha abaixo da chave de fechamento da sua função `conferirPalpite()`:

```js
envioPalpite.addEventListener("click", conferirPalpite);
```

Aqui nós estamos adicionando um *event listener* ao botão `envioPalpite`. Esse é um método que aceita a inserção de dois valores (chamados de argumentos) — o tipo de envento que estamos monitorando (neste caso o evento `click`) como um *string* (sequência de texto), e o código que queremos executar quando o evento ocorrer (neste caso a função `conferirPalpite()` — note que não temos que especificar os parênteses quando estivermos escrevendo dentro de `addEventListener()`).

Tente agora salvar e atualizar seu código, e seu exemplo deve funcionar agora, até um ponto. O único problema agora é que se você acertar o palpite ou ficar sem mais tentativas o jogo irá falhar, porque ainda não definimos a função `configFimDeJogo()` que deve ser executada uma vez que o jogo terminar. Vamos adicionar agora o código restante e completar a funcionalidade do nosso exemplo.

### Finalizando a funcionalidade do jogo

Vamos adicionar a função `configFimDeJogo()` ao final do nosso código e então explorá-lo. Adicione agora isso, abaixo do restante do seu JavaScript:

```js
function configFimDeJogo() {
  campoPalpite.disabled = true;
  envioPalpite.disabled = true;
  botaoReinicio = document.createElement("button");
  botaoReinicio.textContent = "Iniciar novo jogo";
  document.body.appendChild(botaoReinicio);
  botaoReinicio.addEventListener("click", reiniciarJogo);
}
```

* As primeiras duas linhas desabilitam a entrada de texto do formulário e o clique do botão, definindo a propriedade *disabled* (desabilitado) de cada um como `true` (verdadeiro). Isso é necessário, pois se não o fizermos, o usuário poderia submeter mais palpites depois do jogo ter terminado, o que iria bagunçar as coisas.
* As próximas três linhas geram um novo elemento `<button>`, define o texto de seu rótulo como "Iniciar novo jogo", e o adiciona ao final do nosso HTML existente.
* A linha final define um monitor de evento (*event listener*) em nosso botão, para que quando seja clicado, uma função chamada `reiniciarJogo()` seja executada.

Agora precisamos definir essa função também! Adicione o seguinte código, novamente ao final do nosso JavaScript:

```js
function reiniciarJogo() {
  contagemPalpites = 1;

  var reiniciarParas = document.querySelectorAll(".resultadoParas p");
  for (var i = 0; i < reiniciarParas.length; i++) {
    reiniciarParas[i].textContent = "";
  }

  botaoReinicio.parentNode.removeChild(botaoReinicio);

  campoPalpite.disabled = false;
  envioPalpite.disabled = false;
  campoPalpite.value = "";
  campoPalpite.focus();

  ultimoResultado.style.backgroundColor = "white";

  numeroAleatorio = Math.floor(Math.random() \* 100) + 1;
}
```

Esse longo bloco de código redefine completamente tudo do modo como era no início do jogo, para que o jogador possa jogá-lo novamente. Ele:

* Coloca o valor da variável `contagemPalpites` novamente igual a 1.
* Limpa todos os parágrafos de informativos.
* Remove o botão resete do nosso código.
* Habilita os elementos do formulários, esvazia e direciona o foco ao campo de texto, pronto para que um novo palpite seja inserido.
* Remove a cor de fundo do parágrafo `ultimoResultado`.
* Gera um novo número aleatório para que o jogador não esteja tentando adivinhar o mesmo número novamente!

**Neste ponto você deve ter um jogo (simples) completamente funcional — parabéns!**

Tudo o que temos que fazer agora neste artigo é falar sobre alguns outros recursos importantes que você já viu, mesmo que não os tenha notado ainda.

### Loops

Uma parte do código acima que precisamos olhar mais detalhadamente é o loop for. Loop é um conceito muito importante em programação, que permite a você continuar executando um pedaço do código repetidamente, até que determinada condição seja satisfeita.

Para começar, vá novamente até o console JavaScript do seu navegador, e insira o seguinte:

```js
for (var i = 1; i < 21; i++) {
  console.log(i);
}
```

O que aconteceu? Os números de 1 a 20 foram exibidos no seu console. Isso acontece por causa do loop. Um loop `for` utiliza a inserção de três valores (argumentos):

1. **Um valor inicial**: Nesse caso estamos iniciando a contagem em 1, mas poderia ser qualquer outro número que quisesse utilizar. Você pode substituir `i` por qualquer número que quiser também, mas `i` é utilizado por convenção porque é curto e fácil de lembrar.
2. **Uma condição de saída**: Aqui nós especificamos `i < 21` — o loop irá continuar rodando até que `i` não seja mais menor que 21. Quando `i` alcançar 21, o loop não será mais executado.
3. **Incremento**: Nós especificamos `i++`, que siginifica "adicione 1 à i". O loop irá rodar uma vez para cada valor de `i`, até que `i` alcance o valor de 21 (como abordado acima). Nesse caso, nós estamos simplesmente imprimindo o valor de `i` no console em cada iteração usando `console.log()`.

Agora vamos olhar o loop em nosso jogo de adivinhar o número — o código seguinte pode ser encontrado dentro da função `reiniciarJogo()`:

```js
var reiniciarParas = document.querySelectorAll(".resultadoParas p");
for (var i = 0; i < reiniciarParas.length; i++) {
  reiniciarParas[i].textContent = "";
}
```

Esse código cria uma variável contendo uma lista de todos os parágrafos dentro de `<div class="resultadoParas">` usando o método `querySelectorAll()`, e então faz o loop em cada um, removendo o conteúdo de texto dos mesmos.

### Uma pequena discussão sobre objetos

Vamos adicionar uma melhoria final antes de chegarmos a essa discussão. Adicione a linha seguinte logo abaixo da linha `var botaoReinicio;` próximo ao topo do seu JavaScript, em seguida salve nosso arquivo:

```js
campoPalpite.focus();
```

Essa linha usa o método `focus()` (en-US) para automaticamente colocar o cursor dentro campo de texto do `<input>` assim que a página carrega, significando que o usuário já pode começar a digitar o primeiro palpite, e não precisa clicar no campo do formulário primeiro. É apenas uma pequena adição, mas melhora a usabilidade — dando ao usuário uma boa dica visual do que ele deve fazer para jogar o jogo.

Vamos analisar o que está acontencedo aqui com um pouco mais de detalhes. Em JavaScript, tudo é um objeto. Um objeto é uma coleção de funcionalidades relacionadas armazenadas em um único agrupamento. Você pode criar seus próprios objetos, mas isso é bastante avançado e nós não iremos abordar até mais tarde no curso. Por agora, vamos apenas discutir brevemente os objetos pré-construídos presentes em seu navegador, que lhe permite fazer várias coisas úteis.

Neste caso particular, nós primeiro criamos a variável `campoPalpite` que armazena uma referência ao campo de inserção de texto do formulário em nosso HTML — a linha seguinte pode ser achada entre nossas declarações de variáveis próximas ao topo:

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

Para pegar essa referência, usamos o método `querySelector()` do objeto `document`. `querySelector()` pega um pedaço de informação — um seletor CSS (en-US) que seleciona o elemento ao qual você quer referenciar.

Como agora `campoPalpite` contém referência ao elemento `<input>`, ele terá agora acesso a um número de propriedades (basicamente variáveis armazenadas dentro de objetos, sendo que alguns não podem ter seus valores alterados) e métodos (basicamente, funções armazenadas dentro de objetos). Um método disponível para elementos de inserção `<input>`, é o `focus()`, então agora podemos usar essa linha para focar o campo de inserção de texto:

```js
campoPalpite.focus();
```

Variáveis que não contém referências a elementos de formulário não terão `focus()` disponível para elas. Por exemplo, a variável `palpites` contém referência de um elemento `<p>`, e `contagemPalpites` contém um número.

### Brincando com objetos do navegador

Vamos brincar um pouco com alguns objetos do navegador.

1. Primeiro abra seu programa em um navegador.
2. Em seguida, abra as ferramentas de desenvolvimento do navegador, e certifique-se de que a aba do console JavaScript esteja aberta.
3. Digite `campoPalpite` e o console irá lhe mostrar que a variável contém um elemento `<input>`. Você também irá notar que o console completa automaticamente os nomes de objetos existentes dentro do ambiente de execução, incluindo suas variáveis!
    1. Agora digite o seguinte:
     js
    ```js
    campoPalpite.value = "Olá";

    ```
    A propriedade `value` representa o valor atual inserido no campo de texto. Você verá que inserindo esse comando, nós mudamos o valor desse objeto!
4. Agora tente digitar `palpites` e pressione *return*. O console irá mostrar que a variável contém um elemento `<p>`.
5. Agora tente inserir a linha seguinte:

```js
palpites.value;
```

O navegador irá retornar `undefined`, porque `value` não existe em parágrafos.
6. Para mudar o texto dentro de um parágrafo, você precisa da propriedade `textContent`. Tente isso:

```js
palpites.textContent = "Onde está meu parágrafo?";
```

7. Agora algo divertido. Tente inserir as linhas abaixo, uma por uma:

```js
palpites.style.backgroundColor = "yellow";
palpites.style.fontSize = "200%";
palpites.style.padding = "10px";
palpites.style.boxShadow = "3px 3px 6px black";
```

Cada elemento em uma página tem uma propriedade `style`, que contém um objeto no qual estão inseridos em suas propriedades todos os estilos incorporados de CSS aplicados ao respectivo elemento. Isso nos permite configurar dinamicamente novos estilos CSS nos elementos usando JavaScript.
Finalizado por enquanto
-----------------------

Então é isso, para construir o exemplo — você chegou ao final, muito bem! Teste o resultado do seu código, ou jogue com nossa versão finalizada aqui. Se você não conseguir fazer o exemplo funcionar, compare com o código fonte.

* Anterior
* Menu: First steps
* Próxima


Armazenando as informações que você precisa — Variáveis - Aprendendo desenvolvimento web

Armazenando as informações que você precisa — Variáveis
=======================================================

* Anterior
* Menu: First steps
* Próxima

Depois de ler os últimos artigos, você deve saber agora o que é o JavaScript, o que ele pode fazer para você, como você usa isso junto com outras tecnologias da web e as características principais de alto nível. Neste artigo, iremos ao básico, vendo como trabalhar com a maioria dos blocos de construção básicos de JavaScript - Variáveis.

| Pré-requisitos: | Conhecimento básico em informática, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript. |
| --- | --- |
| Objetivo: | Familiarizar-se com o básico de variáveis em JavaScript. |

Ferramentas que você precisa
----------------------------

Ao longo deste artigo, pediremos que você digite linhas de código para testar seu entendimento do conteúdo. Se você estiver utilizando um navegador em um computador, o melhor lugar para digitar seus código de exemplos é o console JavaScript do seu navegador (veja o artigo O que são as ferramentas de desenvolvimento do navegador para mais informações sobre como acessar essa ferramenta).

No entanto, nós também providenciamos um simples console JavaScript incorporado à página logo abaixo para que você inserir o código, caso não esteja usando um navegador com um console JavaScript facilmente disponível, ou se achar o console incorporado mais confortável.

O que é uma variável?
---------------------

Uma variável é um container para um valor, como um número que podemos usar em uma operação de adição, ou uma sequência de texto que possamos usar como parte de uma oração. Mas uma coisa especial a respeito das variáveis é que seu conteúdo pode mudar. Vamos ver um exemplo simples:

```html
<button>Aperte-me</button>
```

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

button.onclick = function () {
  var nome = prompt("Qual é o seu nome?");
  alert("Olá " + nome + ", é um prazer te ver!");
};
```

Nesse exemplo, apertar o botão executa algumas linhas de código. A primeira linha exibe uma caixa pop-up na tela que pede ao leitor para inserir o seu nome, e então armazena o valor na variável. A segunda linha exibe uma mensagem de boas vindas que inclui seu nome, obtido do valor da variável.

Para entender porque isso é útil, vamos pensar sobre como nós escreveríamos esse exemplo sem usar uma variável. Iria acabar se parecendo com algo do tipo:
```

var nome = prompt('Qual é o seu nome?');

if (nome === 'Adão') {
  alert('Olá Adão, é um prazer te ver!');
} else if (nome === 'Alan') {
  alert('Olá Alan, é um prazer te ver!');
} else if (nome === 'Bella') {
  alert('Olá Bella, é um prazer te ver!');
} else if (nome === 'Bianca') {
  alert('Olá Bianca, é um prazer te ver!');
} else if (nome === 'Chris') {
  alert('Olá Chris, é um prazer te ver !');
}

// ... e assim por diante ...
```

Você talvez não entenda totalmente a sintaxe que estamos usando (ainda!), mas deve ter pegado a ideia — se nós não tivermos variáveis disponíveis teríamos que implementar um bloco de código gigantesco para conferir qual era o nome inserido, e então exibir a mensagem apropriada para aquele nome. Isso é obviamente muito ineficiente (o código é muito maior, mesmo para apenas quatro opções de nome), e simplesmente não funcionaria — você não poderia armazenar todas as possíveis opções de nome.

Variáveis simplesmente fazem sentido, e a medida que você for aprendendo mais sobre JavaScript elas começarão a se tornar uma coisa natural.

Outra coisa especial sobra as variáveis é que elas podem conter praticamente qualquer coisa — não apenas cadeias de texto e números. Variáveis também podem conter dados complexos e até mesmo funções completas para fazer coisas incríveis. Você irá aprender mais sobre isso a medida que continuarmos.

**Nota:** Perceba que dissemos que as variáveis contém valores. Essa é uma distinção importante a se fazer. Elas não são os valores; e sim os containers para eles. Você pode pensar nelas sendo pequenas caixas de papelão nas quais você pode guardar coisas..

![](/pt-BR/docs/Learn/JavaScript/First_steps/Variables/boxes.png)

Declarando uma variável
-----------------------

Para usar uma variável primeiro tem que criá-la — mais precisamente, chamamos isso de declarar a variável. Para fazê-lo digitamos a palavra chave `var` seguido do nome que desejamos dar à variável:

```js
var meuNome;
var minhaIdade;
```

Aqui, estamos criando duas variáveis chamadas `meuNome` e `minhaIdade`. Tente agora digitar essas linhas no console do seu navegador. Depois disso, tente criar uma variável (ou duas) com suas próprias escolhas de nomes.

**Nota:** No JavaScript, todas as intruções em código deve terminar com um ponto e vírgula (`;`) — seu código pode até funcionar sem o ponto e vírgula em linhas únicas, mas provavelmente não irá funcionar quando estiver escrevendo várias linhas de código juntas. Tente pegar o hábito de sempre incluir o ponto e vírgula.

Você pode testar se os valores agora existem no ambiente de execução digitando apenas os nomes das variáveis, ex.:

```js
meuNome;
minhaidade;
```

Elas atualmente não possuem valor; são containers vazios. Quando você insere o nome de uma variável, você deve obter em retorno ou um valor `undefined` (indefinido), ou se a variável não existir, você recebe uma mensagem de erro — tente digitar:

```js
scoobyDoo;
```

**Nota:** Não confunda uma variável que existe mas não tenho valor definido com uma variável que não existe — são coisas bem diferentes.

Inicializando uma variável
--------------------------

Uma vez que você declarou uma variável, você pode inicializá-la com um valor. Você faz isso digitando o nome da variável, seguido do sinal de igual (`=`) e o valor que deseja atribuir a ela. Por exemplo:

```js
meuNome = "Chris";
minhaIdade = 37;
```

Tente voltar ao console agora e digitar essas linhas acima. Você deve ver o valor que atribuiu à variável retornado no console confirmando-o, em cada caso. De novo, você pode retornar os valores de suas variáveis simplesmente digitando seus nomes no console — tente isso novamente:

```js
meuNome;
minhaIdade;
```

Você pode declarar e inicializar uma variável ao mesmo tempo, assim:

```js
var meuNome = "Chris";
```

Isso provavelmente é como irá fazer na maioria das vezes, já que é mais rápido do que fazer as duas ações em duas linhas separadas.

A diferença entre var e let
---------------------------

Agora você pode estar pensando "por que precisamos de duas palavras-chave para definir variáveis? Por que `var` *e* `let`?".

As razões são um tanto históricas. Quando o JavaScript foi criado, havia apenas `var`. Isso funciona basicamente bem na maioria dos casos, mas tem alguns problemas na maneira como funciona — seu design pode ser confuso ou totalmente irritante. Portanto, `let` foi criada nas versões modernas de JavaScript, uma nova palavra-chave para criar variáveis que funcionam de maneira um pouco diferente para `var`, corrigindo seus problemas no processo.

Algumas diferenças simples são explicadas abaixo. Não abordaremos todas as diferenças agora, mas você começará a descobri-las à medida que aprender mais sobre JavaScript (se realmente quiser ler sobre elas agora, fique à vontade para conferir nossa página de referência let).

Para começar, se você escrever um programa JavaScript de várias linhas que declare e inicialize uma variável, poderá realmente declarar uma variável com `var` depois de inicializá-la e ainda funcionará. Por exemplo:

```js
meuNome = "Chris";

function logNome() {
  console.log(meuNome);
}

logNome();

var meuNome;
```

**Nota:** Isso não funcionará ao digitar linhas individuais em um console JavaScript, apenas ao executar várias linhas de JavaScript em um documento da web.

Isso funciona por causa do **hoisting** — leia var hoisting pra mais detalhes.

Hoisting não funciona mais com `let`. Se mudássemos de `var` para `let` no exemplo acima, teríamos um erro. Isso é bom — declarar uma variável depois que você a inicializa resulta em código confuso e difícil de entender.

E depois, ao usar `var`, você pode declarar a mesma variável quantas vezes quiser, mas com `let` você não consegue. Isso pode funcionar:

```js
var meuNome = "Chris";
var meuNome = "Bob";
```

Mas isso geraria um erro na segunda linha:

```js
let meuNome = "Chris";
let meuNome = "Bob";
```

Você precisaria fazer assim:

```js
let meuNome = "Chris";
meuNome = "Bob";
```

Novamente, essa é uma decisão sensata da linguagem. Não há razão para redeclarar variáveis — isso apenas torna as coisas mais confusas.

Por esses motivos e mais, recomendamos que você use `let` o máximo possível em seu código, em vez de `var`. Não há motivo para usar `var`, a menos que você precise oferecer suporte para versões antigas do Internet Explorer com seu código (ele não suporta `let` até a versão 11; o navegador mais moderno do Windows, o Edge, suporta `let`).

Atualizando uma variável
------------------------

Uma vez que uma tenha um valor atribuido, você pode atualizar esse valor simplesmente dando a ela um valor diferente. Tente inserir as seguintes linhas no seu console:

```js
meuNome = "Bob";
minhaIdade = 40;
```

### Um adendo sobre regras de nomeação de variáveis

Você pode chamar uma variável praticamente qualquer nome que queira, mas há limitações. Geralmente você deve se limitar a utilizar somente caracteres latinos (0-9, a-z, A-Z) e o caractere underline ( \_ ).

* Você não deve usar outros caracteres porque eles podem causar erros ou ser difíceis de entender por uma audiência internacional.
* Não use underline no início do nome de variáveis — isso é utilizado em certos construtores JavaScript para significar coisas específicas, então pode deixar as coisas confusas.
* Não use número no início do nome de variáveis. Isso não é permitido e irá causar um erro.
* Uma conveção segura é se ater à chamada "lower camel case", onde você junta várias palavras, usando minúscula para a primeira palavra inteira e, em seguida, maiusculiza a primeira letra das palavras subsequentes. Temos utilizado esse procedimento para os nomes das nossas variáveis nesse artigo até aqui.
* Faça nomes de variáveis intuitivos, para que descrevam o dado que ela contém. Não use letras ou números únicos, ou frases muito longas.
* As variáveis diferenciam letras maiúsculas e minúsculas — então `minhaidade` é uma variável diferente de `minhaIdade`.
* Um último ponto — você também precisa evitar utilizar palavras reservadas pelo JavaScript como nome para suas variáveis — com isso, queremos dizer as palavras que fazem parte da sintaxe do JavaScript! Então você não pode usar palavras como `var`, `function`, `let` e `for` como nome de variáveis. Os navegadores vão reconhecê-las como itens de código diferentes e, portanto, você terá erros.

**Nota:** Você pode encontrar uma lista bem completa de palavras reservadas para evitar em Gramática léxica — Palavras-chave.

Exemplos de bons nomes:
```

idade
minhaIdade
inicio
corInicial
valorFinalDeSaida
audio1
audio2
```

Exemplos ruins de nomes:
```

1
a
_12
minhaidade
MINHAIDADE
var
Document
skjfndskjfnbdskjfb
esseeumnomedevariavelbemlongoeestupido
```

Tente criar mais algumas variáveis agora, com a orientação acima em mente.

Tipos de variáveis
------------------

Existem alguns diferentes tipos de dados que podemos armazenar em variáveis. Nessa seção iremos descrevê-los brevemente, e então em artigos futuros você aprenderá sobre eles em mais detalhes.

Até agora nós vimos os dois primeiros, mas há outros.

### Números

Você pode armazenar números em variáveis, tanto números inteiros, como por exemplo 30 (também chamados de *integers*) como números decimais, por exemplo 2.456 (também chamados de *floats* ou *floating point numbers*). Você não precisa declarar tipos de variáveis no JavaScript, diferentemente de outras linguagens de programação. Quando você atribui a uma variável o valor em número, você não inclui as aspas:

```js
var minhaIdade = 17;
```

### *Strings* (cadeias de texto)

*Strings* são sequências de texto. Quando você dá a uma variável um valor em texto (*string*), você precisa envolver o texto em aspas simples ou duplas; caso contrário, o JavaScript vai tentar interpretá-lo como sendo outro nome de variável.

```js
var despedidaGolfinho = "Até logo e obrigado por todos os peixes!";
```

### *Booleans* (boleanos)

*Booleans* são valores verdadeiro/falso (*true/false*) — eles podem ter dois valores, `true` (verdadeiro) ou `false` (falso). São geralmente usados para verificar uma condição, que em seguida o código é executado apropriadamente. Por exemplo, um caso simples seria:

```js
var estouVivo = true;
```

Enquanto na realidade seria utlizado mais da seguinte forma:

```js
var teste = 6 < 3;
```

Esse exemplo está usando o operador "menor que" (`<`) para testar se 6 é menor que 3. Como você pode esperar, irá retornar `false` (falso), porque 6 não é menor que 3! Você aprenderá mais sobre tais operadores mais tarde no curso.

### *Arrays*

Um array é um único objeto que contém valores múltiplos inseridos entre colchetes e separados por vírgulas. Tente inserir as seguintes linhas de código no seu console:

```js
var meuNomeArray = ["Chris", "Bob", "Jim"];
var meuNumeroArray = [10, 15, 40];
```

Uma vez que esses arrays estejam definidos, você pode acessar cada um de seus valores através de sua localização dentro do array. Tente essas linhas:

```js
meuNomeArray[0]; // deve retornar 'Chris'
meuNumeroArray[2]; // deve retornar 40
```

Os colchetes especificam um valor do índice correspondente à posição do valor que você deseja retornado. Você talvez tenha notado que os arrays em JavaScript são indexados a partir do zero: o primeiro elemento está na posíção 0 do índice.

Você aprenderá mais sobre arrays em um artigo futuro.

### Objetos

Em programação, um objeto é uma estrutura de código que representa um objeto da vida real. Você pode ter um simples objeto que representa um estacionamento de carro contendo informações sobre sobre sua largura e comprimento, ou você poderia ter um objeto que representa uma pessoa, e contém dados sobre seu nome, altura, peso, que idioma ela fala, como dizer olá a ela, e mais.

Tente inserir a seguinte linha em seu console:

```js
var cachorro = { nome: "Totó", raca: "Dálmata" };
```

Para obter a informação armazenada no objeto, você pode usar a seguinte sintaxe:

```js
cachorro.nome;
```

Nós não iremos ver mais sobre objetos por agora — você pode aprender mais sobre eles em um artigo futuro.

Digitação permissiva
--------------------

JavaScript é uma "dynamically typed language", o que significa que, diferente de outras linguagens, você não precisa especificar que tipo de dados uma variável irá conter (ex.: números, cadeias de texto, arrays, etc).

Por exemplo, se você declarar uma variável e dar a ela um valor encapsulado em aspas, o navegador irá tratar a variável como sendo uma *string* (cadeia de texto):

```js
var minhaString = "Olá";
```

Irá continuar sendo uma *string*, mesmo que dentro das apas contenha um número, então seja cuidadoso:

```js
var meuNumero = "500"; // opa, isso continua sendo uma string
typeof meuNumero;
meuNumero = 500; // bem melhor — agora isso é um número
typeof meuNumero;
```

Tente inserir as quatro linhas acima em seu console uma por uma, e veja quais são os resultados. Você notará que estamos usando uma função especial chamada `typeof()` — ela irá retornar o tipo de dado da variável que você passar. Da primeira vez que for executada, deve retornar `string`, como naquele ponto a variável `meuNumero` contém uma *string*, `'500'`. Dê uma olhada e veja o que é retornado da segunda vez que você a utilizar.

Constants em JavaScript
-----------------------

Muitas linguagens de programação têm o conceito de *constant* — um valor que uma vez declarado não pode ser alterado. Há muitas razões pelas quais você deseja fazer isso, desde segurança (se um script de terceiros alterou esses valores, poderia causar problemas) até a depuração e a compreensão do código (é mais difícil alterar acidentalmente valores que não devem ser alterados e bagunçar as coisas).

Nos primeiros dias do JavaScript, não existiam *constants*. No JavaScript moderno, temos a palavra-chave `const`, que nos permite armazenar valores que nunca podem ser alterados:

```js
const diasNaSemana = 7;
const horasNoDia = 24;
```

`const` funciona exatamente da mesma maneira que `let`, exceto que você não pode atribuir um novo valor a `const`. No exemplo a seguir, a segunda linha geraria um erro:

```js
const diasNaSemana = 7;
diasNaSemana = 8;
```

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

Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja Teste suas habilidades: variáveis.

Sumário
-------

Por agora você deve saber razoavelmente sobre variáveis JavaScript e como criá-las. No próximo artigo Vamos focar nos números em mais detalhes, vendo como fazer matemática básica no JavaScript.

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


Trabalhando com texto — strings em JavaScript - Aprendendo desenvolvimento web

Trabalhando com texto — strings em JavaScript
=============================================

* Anterior
* Menu: First steps
* Próxima

Agora vamos dar atenção às strings - isto é como é chamado em programação qualquer parte de texto. Neste artigo nós veremos tudo que você realmente deve saber sobre strings quando está aprendendo JavaScript. Como criar, fazer citações e como juntar strings.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Computação básica, um entendimento básico de HTML e CSS, e sobre o que é
 JavaScript.
  |
| Objetivo: | Ganhar familiaridade com o básico de strings em JavaScript. |

O poder das palavras
--------------------

Palavras são muito importante para humanos - elas são uma grande parte de como nos comunicamos. Desde que a Web é largamente baseada em texto, projetada para permitir humanos a comunicar e compartilhar infomação, isto é útil para nós termos controle sobre como apresentar isso. HTML fornece estrutura e significado para nosso texto, CSS nos permite estilizar precisamente ele, e JavaScript contem um número de funcionalidades para manipular strings, criar mensagens de boas-vindas customizadas, mostrando rótulos quando preciso, sorteando termos de acordo como desejado e muito mais.

Muitos dos programas que temos visto até agora no curso está envolvido em alguma parte com manipulação de string.

Strings — O básico
------------------

Em um primeiro relance, strings são tratadas de forma parecida como números, mas quando vamos mais a fundo, você começa a ver algumas diferenças importantes. Vamos começar a entrar em linhas básicas no console para nos familiarizar. Nós vamos fornecer abaixo (você pode também abrir isto no console em uma guia ou janela separada, ou usar o console do navegador se você preferir).
```

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

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

 body {
 max-width: 700px;
 }

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

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

 .output p {
 width: 100%;
 }

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

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

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

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

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

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

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

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

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

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

 createInput();
 }

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

### Criando uma string

1. Para começar, digite as linhas seguintes:

```js
var string = "The revolution will not be televised.";
string;
```

Como fizemos com números, nós declaramos uma variável, inicializando-a com um valor string, e então retornamos o valor. A única diferença aqui é que quando escrevemos uma string, você precisa colocá-la entre aspas.
2. Se você não fez isso, ou esqueceu uma das aspas, você recebeu um erro. Experimente digitar as linhas seguintes:

```js
var badString = This is a test;
var badString = 'This is a test;
var badString = This is a test';
```

Estas linhas não funcionam porque todo texto sem aspas são interpretados como um nome de variável, propriedade do nome, palavra reservada ou algo assim. Se o navegador não puder encontrar, então um erro é apresentado (ex.: "faltando; declaração anterior"). Se o navegador puder ver onde a string começa, mas não conseguir encontrar o fim, como indicado com as segundas aspas, é retornado um erro (com "string não terminada"). Se seu programa retorna tais erros, então volte e verifique todas suas strings para ter certeza que não faltam aspas.
3. O seguinte funcionará se você definiu previamente a variável `string` - tente isto agora:

```js
var badString = string;
badString;
```

`badString` é agora definido para ter o mesmo valor de `string`.
### Aspas simples x aspas duplas

1. Em JavaScript, você pode escolher aspas simples ou duplas para envolver suas strings. Ambas linhas abaixo funcionará bem:

```js
var sgl = "Single quotes.";
var dbl = "Double quotes";
sgl;
dbl;
```

2. Há poucas diferenças entre as duas, e qual você usar é de preferência pessoal. Você deve escolher uma e permanecer nela, entretanto; diferentes aspas no código pode ser confuso, especialmente se você usa diferentes aspas na mesma string! O seguinte retornará erro:

```js
var badQuotes = 'What on earth?";
```

3. O navegador interpretará como a string não tivesse fechada, porque o outro tipo de aspas pode aparecer dentro da sua string. Por exemplo, ambos exemplos abaixo são okay:

```js
var sglDbl = 'Would you eat a "fish supper"?';
var dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;
```

4. Entretanto, você não pode incluir o mesmo tipo de aspas dentro da sua string, se você usa para conter seu texto. O seguinte será um erro, como é confuso para o navegador onde a string termina:

```js
var bigmouth = 'I've got no right to take my place...';
```

Isto nos leva muito bem ao nosso próximo assunto.
### Caracteres de escape na string

Para corrigir o problema anterior, nós precisamos escapar o problema da aspa. Caracteres de escape significa que nós fazemos algo para ter certeza que eles são reconhecidos como texto, não parte do código. Em JavaScript, nós fazemos isso colocando uma barra invertida logo antes do caracter.Tente isso:

```js
var bigmouth = "I've got no right to take my place...";
bigmouth;
```

Isto funciona bem. Você pode escapar outros caracteres do mesmo jeito, ex.: `\"`, e há alguns códigos especiais também. Veja Notação de escape para mais detalhes.

Concatenando strings
--------------------

1. Concatenar é uma palavra chique da programação que significa "colocar junto". Para colocar strings juntas em JavaScript, usamos o operador (+), o mesmo usamos para adicionar números, mas neste contexto é algo diferente. Vamos tentar este exemplo no console.

```js
var one = "Hello, ";
var two = "how are you?";
var joined = one + two;
joined;
```

O resultado disso é uma variável chamada `joined`, que contém o valor "Hello, how are you?".
2. No último exemplo, nós somente juntamos duas strings, mas você pode fazer quantas quiser, contanto que inclua um `+` entre cada uma.Experimente isso:

```js
var multiple = one + one + one + one + two;
multiple;
```

3. Você pore usar um mix de variáveis e strings reais. Tente isso:

```js
var response = one + "I am fine — " + two;
response;
```

**Nota:** Quando você coloca uma string atual no seu código dentro de aspas simples ou duplas, é chamada uma **string literal**.

### Concatenação em contexto

Vamos dar uma olhada na concatenação em ação — aqui está um exemplo do curso anterior:

```html
<button>Pressione-me</button>
```

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

button.onclick = function () {
  var nome = prompt("Qual é o seu nome?");
  alert("Olá " + nome + ", prazer em conhecê-lo!");
};
```

Aqui estamos usando uma função `Window.prompt()` na linha 4, a qual pergunta ao usuário para responder uma questão via uma caixa de diálogo, então armazena o texto em uma variável — neste caso `nome`. Nós então usamos uma função `Window.alert()` na linha 5 para mostrar outra caixa de diálogo contendo nossa string montada de duas strings literais e a variável `name`,via concatenação.

### Números x strings

1. Então o que acontece quando tentamos adicionar (ou concatenar) uma string e um número? Vamos tentar isso no console:

```js
"Front " + 242;
```

Você pode esperar um erro disto, mas funciona correto. Tentando representar uma string como um número, realmente não faz sentido. Mas representando um número como string, faz. Então o navegador espertamente converte o número em string e concatena as duas.
2. Você pode fazer isto até com dois números — você pode forçar um número a ser string colocando ele entre aspas. Experimente o seguinte (nós estamos usando o operador `typeof` para checar o que a variável é, se um número ou string):

```js
var myDate = "19" + "67";
typeof myDate;
```

3. Se você tem uma variável numérica que precisa converter em string, mas não mudar completamente, ou uma string e quer converter em número, você pode usar a construção seguinte:
    * O objeto `Number` converterá qualquer coisa passada em um número, se for possível. Tente o seguinte:
     js
    ```js
    var myString = "123";
    var myNum = Number(myString);
    typeof myNum;

    ```
    * Por outro lado, todo número tem um método chamado `toString()` que converterá para a string equivalente. Tente isto:
     js
    ```js
    var myNum = 123;
    var myString = myNum.toString();
    typeof myString;

    ```Estas construções podem ser bem úteis em algumas situações. Por exemplo, se o usuário colocar um número em um campo de texto, isso será uma string. Entretanto, se você quiser adicionar este número a algo, você precisa que seja um número, então você pode passar isto através do `Number()` para poder manipular.Nós fizemos exatamente isto no nosso Number Guessing Game, in line 59.
Conclusão
---------

Então isto é o basico sobre strings em JavaScript. No próximo artigo nós iremos continuar daqui, vendo alguns métodos de construção de strings disponíveis em JavaScript e como nós podemos usá-los para manipular nossa string da forma como quisermos.

* Anterior
* Menu: First steps
* Próxima


Métodos úteis de string - Aprendendo desenvolvimento web

Métodos úteis de string
=======================

* Anterior
* Menu: First steps
* Próxima

Agora que nós vimos o básico de strings, vamos engatar a próxima marcha e começar a pensar sobre as operações úteis que podemos fazer em strings com métodos embutidos, como encontrar o comprimento de um string, unir e dividir sequências de caracteres, substituindo um caracter em uma string por outro, e muito mais.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento básico de computador, uma compreensão básica de HTML e CSS,
 uma compreensão do que é o JavaScript.
  |
| Objetivo: |
 Entender que strings são objetos e aprender a usar alguns do métodos
 básicos disponíveis nesses objetos para manipular strings.
  |

Strings como objetos
--------------------

Como dissemos antes e diremos novamente — *tudo* é um objeto em JavaScript. Quando você cria um string, usando por exemplo

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

sua variável torna-se uma instância do objeto string e, como resultado, tem um grande número de propriedades e métodos diponíveis para ela. Você pode ver isso se você for na página do objeto `String` e olhar para baixo na lista do lado da página!

**Agora, antes de seu cérebro começar a derreter, não se preocupe!** Você não precisa saber sobre a maioria deles no início da sua jornada de aprendizado. Mas há alguns que você potencialmente usará com bastante frequência que veremos aqui.

Vamos digitar alguns exemplos em um console novo. Nós fornecemos um abaixo (você também pode abrir este console em uma guia ou janela separada, ou usar o console do desenvolvedor do navegador, se preferir).

Nós fornecemos um abaixo (você também pode abrir esse console em uma aba ou janela separada, ou usar o console do navegador do desenvolvedor se você preferir).
```

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

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

 body {
 max-width: 700px;
 }

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

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

 .output p {
 width: 100%;
 }

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

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

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

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

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

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

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

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

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

 createInput();
 }

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

### Descobrindo o comprimento de uma string

Essa é fácil — você simplesmente usa a propriedade `length`. Tente digitar as linhas a seguir:

```js
var browserType = "mozilla";
browserType.length;
```

Isso deve retornar o número 7, porque "mozilla" tem 7 caracteres. Isso é útil por vários motivos; por exemplo, você pode querer encontrar os comprimentos de uma série de nomes para que você possa exibi-los em ordem de comprimento, ou deixar um usuário saber que um nome de usuário que ele informou em um campo de formulário é muito longo se este for maior do que um certo comprimento.

### Recuperando um caractere de string específico

Nota complementar: você pode retornar qualquer caractere dentro de uma string usando a **notação colchete** - isso significa que você inclui colchetes (`[]`) no final do nome da variável. Dentro dos colchetes, você inclui o número do caractere que deseja retornar, por exemplo, para recuperar a primeira letra, faça o seguinte:

```js
browserType[0];
```

Computadores contam a partir de 0, não 1! Para recuperar o último caractere de *qualquer* string, nós podemos usar a linha a seguir, combinando essa técnica com a propriedade `length` que vimos anteriormente:

```js
browserType[browserType.length - 1];
```

O comprimento de "mozilla" é 7, mas porque a contagem começa de 0, a posição do caractere é 6, daí precisamos usar `length-1`. Você pode usar isso para, por exemplo, encontrar a primeira letra de uma série de strings e ordená-los alfabeticamente.

### Encontrando uma substring dentro de uma string e extraindo-a

1. Às vezes você quer saber se uma string menor está presente dentro de uma maior (geralmente dizemos *se uma substring está presente dentro de uma string*). Isso pode ser feito usando o método `indexOf ()`, que leva um único parameter (en-US) - a substring que deseja procurar. Experimente isso:

```js
browserType.indexOf("zilla");
```

Isso nos dá o resultado 2, porque a substring "zilla" se inicia na posição 2 (0, 1, 2 — então, 3 caraceteres) dentro de "mozilla". Esse código poderia ser usado para filtrar cadeias de caracteres. Por exemplo, podemos ter uma lista de endereços da web e apenas queremos imprimir aqueles que contenham "mozilla".
2. Isso pode ser feito de outro jeito, que é possivelmente mais eficaz. Experimente isso:

```js
browserType.indexOf("vanilla");
```

Isso deve lhe dar um resultado `-1` — isso é retornado quando a substring, neste caso 'vanilla', não é encontrada na string principal.
 Você pode usar isso para encontrar todas as instâncias de strings que **não contém** a substring 'mozilla', ou **contém**, se você usar o operador de negação, conforme mostrado abaixo. Você poderia fazer algo assim:

```js
if (browserType.indexOf("mozilla") !== -1) {
  // faz coisas com a string
}
```

3. Quando você sabe onde uma substring começa dentro de uma string e você sabe em qual caractere você deseja que ela termine, `slice ()` pode ser usado para extrair isto. Tente o seguinte:

```js
browserType.slice(0, 3);
```

Isso retorna "moz" — o primeiro parâmetro é a posição do caractere a partir da qual será iniciada a extração, e o segundo parâmetro é a posição seguinte do último caractere a ser extraído. Então, a fatia ocorre da primeira posição, até a última posição, mas não incluindo. Você também pode dizer que o segundo parâmetro é igual ao comprimento da string que está sendo retornada.

Também, se você sabe que você deseja extrair todos os caracteres restantes em uma string após um certo caracter, você não tem que incluir o segundo parametro! Você apenas precisa incluir a posição do caracter a partir de onde você deseja extrar os caracteres restantes em uma string. Tente o seguinte:

```js
browserType.slice(2);
```

Isso retornará "zilla" — isso é porque a posição de caracter 2 é a letra z, e porque você não incluiu o segundo parametro, a substring retornou todos os caracteres restantes na string.

**Nota:** O segundo parametro do `slice()` é opcional: Se você não incluir ele, o slice finaliza no fim da string original. Existem outras opções também; estude a `slice()` pagina para ver o que mais você pode descobrir.

### Mudando entre maiúsculas e minúsculas

O método string `toLowerCase()` e `toUpperCase()` toma a string e converte todos os caracteres para minusculo - ou maiusculo, respectivamente. Este pode ser util, por exemplo, se você quer normalizar todas as entradas de dados do usuário antes de armazenar em um banco de dados.

Vamos testar inserindo as seguintes linhas para ver o que acontece:

```js
var radData = "My NaMe Is MuD";
radData.toLowerCase();
radData.toUpperCase();
```

### Atualizando partes de uma string

Você pode substituir uma substring dentro de uma string com uma outra substring usando o método `replace()`. Este funciona muito simples em um nível básico, apesar haver algumas coisas avançadas que você pode fazer com ele, nós não iremos tão longe ainda.

Ele toma dois parametros — A string que você quer substituir e a string que você quer que substitua o primeiro parametro. Tente este exemplo:

```js
browserType.replace("moz", "van");
```

Observe que para realmente obter o valor atualizado refletido na variavel `browserType` em um programa real, você teria que setar o valor da variavel para ser o resultado da operação; não apenas atualizar o valor da substring automaticamente. Assim você teria que realmente escrever isso: `browserType = browserType.replace('moz','van');`

Exemplos para aprendizado ativo
-------------------------------

Nesta seção, tentaremos escrever um código de manipulação de string. Em cada exercício abaixo, temos uma matriz de strings e um loop que processa cada valor na matriz e o exibe em uma lista com marcadores. Você não precisa entender matrizes ou loops agora - isso será explicado em artigos futuros. Tudo o que você precisa fazer em cada caso é escrever o código que produzirá as strings no formato em que as queremos.

Cada exemplo vem com um botão "Reset", que você pode usar para redefinir o código original, isso se cometer um erro e não conseguir faze-lo funcionar novamente, e um botão "Show Solution" que você pode pressionar para ver aresposta em potencial se realmente estiver travado.

### Filtrando mensagens de saudação

No primeiro exercício, começaremos com simplicidade - temos várias mensagens de cartão, mas queremos classificá-las para listar apenas as mensagens de Natal. Queremos que você preencha um teste condicional dentro da estrutura if (...), para testar cada string e apenas imprimi-la na lista se for uma mensagem de Natal.

1. Primeiro pense em como você poderia testar se a mensagem em cada caso é uma mensagem de Natal. Qual string está presente em todas essas mensagens e que método você poderia usar para testar se ela está presente?
2. Em seguida, você precisará escrever um teste condicional do formulario operando2 operador operando1. A coisa à esquerda é igual à coisa à direita? Ou neste caso, o método chama à esquerda retorna o resultado à direita?
3. Dica: Nesse caso, é provavelmente mais útil testar se a chamada do método não é igual a um determinado resultado.
```

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

<textarea id="code" class="playable-code" style="height: 290px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];

for (var i = 0; i < greetings.length; i++) {
  var input = greetings[i];
  // Seu teste condicional precisa ir dentro dos parênteses
  // na linha abaixo, substituindo o que está lá
  if (greetings[i]) {
    var result = input;
    var listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }
}
</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 list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar greetings = ['Happy Birthday!',\n 'Merry Christmas my love',\n 'A happy Christmas to all the family',\n 'You\\'re all I want for Christmas',\n 'Get well soon'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf('Christmas') !== -1) {\n var result = input;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}";

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

### Corrigindo a capitalização

Neste exercício, temos os nomes das cidades no Reino Unido, mas a capitalização está toda desarrumada. Nós queremos que você as altere para que elas sejam todas minúsculas, exceto pela primeira letra maiúscula. Uma boa maneira de fazer isso é:

1. Converta toda a cadeia contida na variável de entrada para minúscula e armazene-a em uma nova variável.
2. Pegue a primeira letra da string nesta nova variável e armazene-a em outra variável.
3. Usando esta última variável como substring, substitua a primeira letra da string em minúsculas pela primeira letra da string em minúsculas alterada para maiúscula. Armazene o resultado desse procedimento de substituição em outra nova variável.
4. Altere o valor da variável `result` para igual ao resultado final, não a `input`.

**Nota:** Uma dica — os parâmetros dos métodos de string não precisam ser literais de string; eles também podem ser variáveis, ou mesmo variáveis com um método sendo invocado nelas.
```

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

<textarea id="code" class="playable-code" style="height: 250px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
for(var i = 0; i < cities.length; i++) {
  var input = cities[i];
  // write your code just below here

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</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 list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}";

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

### Fazendo novas strings a partir de partes antigas

Neste último exercício, o array contém um monte de strings contendo informações sobre estações de trem no norte da Inglaterra. As strings são itens de dados que contêm o código da estação de três letras, seguido por alguns dados legíveis por máquina, seguidos por um ponto-e-vírgula, seguido pelo nome da estação legível por humanos. Por exemplo:
```

MAN675847583748sjt567654;Manchester Piccadilly
```

Queremos extrair o código e o nome da estação e juntá-los em uma string com a seguinte estrutura:
```

MAN: Manchester Piccadilly
```

Nós recomendamos que faça assim:

1. Extraia o código da estação de três letras e armazene-o em uma nova variável.
2. Encontre o número de índice do caractere do ponto e vírgula.
3. Extraia o nome da estação legível usando o número do índice de caracteres de ponto-e-vírgula como ponto de referência e armazene-o em uma nova variável.
4. Concatene as duas novas variáveis e uma string literal para fazer a string final.
5. Altere o valor da variável `result` para igual à string final, não a `input`.
```

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

<textarea id="code" class="playable-code" style="height: 285px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                'GNF576746573fhdg4737dh4;Greenfield',
                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                'SYB4f65hf75f736463;Stalybridge',
                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

for (var i = 0; i < stations.length; i++) {
  var input = stations[i];
  // write your code just below here

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</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 list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar stations = ['MAN675847583748sjt567654;Manchester Piccadilly',\n 'GNF576746573fhdg4737dh4;Greenfield',\n 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',\n 'SYB4f65hf75f736463;Stalybridge',\n 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(';');\n var name = input.slice(semiC + 1);\n var result = code + ': ' + name;\n var listItem = document.createElement('li');\n listItem.textContent = result;\n list.appendChild(listItem);\n}";

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

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

Você não pode escapar do fato de que ser capaz de lidar com palavras e frases em programação é muito importante — particularmente em JavaScript, pois os sites são todos sobre comunicação com pessoas. Este artigo forneceu os fundamentos que você precisa saber sobre a manipulação de strings por enquanto. Isso deve atendê-lo bem ao abordar tópicos mais complexos no futuro. Em seguida, vamos ver o último tipo de dados importante que precisamos focar no curto prazo — arrays.

* Anterior
* Menu: First steps
* Próxima