Isso é um draft. Esse livro está sendo escrito. Portanto a versão que você está lendo pode ser completamente diferente da que será publicada. Dúvidas e sugestões são bem vindas e podem ser adicionadas como issues no github.
Título

Índice

  1. Introdução - O Vilarejo dos Newbies
  2. Condicionais - A Planície Lógica
  3. Vetores - O Castelo das Listas
  4. DOM - Dom Manuel, o Rei da Organização
  5. Funções - A caverna da recursão
  6. Objetos - As Relíquias do Rei
  7. Módulos - O Despertar do Dragão da Complexidade

Introdução - O Vilarejo dos Newbies

Status do capítulo: rascunho.

Desde que você nasceu você ouve histórias épicas sobre magos poderosos que usam o Javascript para criar efeitos mágicos. Você acredita que você também poderá fazer coisas incríveis com o Javascript.

Você finalmente decidiu sair do Vilarejo dos Newbies e começar a sua própria aventura no mundo do Javascript. O ancião do vilarejo lhe disse que existe um sábio que vive na Caverna da recursão que pode lhe ensinar a dominar os segredos da Web.

Bem vindo ao mundo do Javascript. Um lugar cheio de perigos e aventuras. Sua jornada começa agora.

O Javascript é uma linguagem de programação criada há milênios (1995). É a linguagem da Web. Atualmente ele roda em todos os navegadores e celulares. Quase todos os sites que você acessa usam o Javascript para adicionar comportamento dinâmico às páginas Web.

Quando você clica nos ícones do chat no Facebook e uma aba de chat aparece, isso é Javascript. Quando você recebe uma notificação de mensagem na sua área de trabalho, isso é Javascript.

Isso é Javascript!

Vamos explorar um pouco como a linguagem funciona. Todo esse livro vai ser baseado no versão mais recente do navegador Google Chrome. Mas se você usa um outro navegador não terá problemas em seguí-lo. A não ser que você use o Safari, daí você vai sofrer desnecessariamente.

Abra Mais ferramentas > Ferramentas do desenvolvedor (Ctrl + shift + i no Windows).

Você verá em algum lugar na tela uma janela cheia de coisas estranhas. A segunda da lista é Console. Entre lá.

Screenshot do console

Aqui você pode escrever código Javascript e ele vai rodar na hora. Vamos tentar nosso primeiro código: digite 2 + 2 e aperte enter

> 2 + 2
< 4

Logo abaixo da linha que você digitou vai aparecer o resultado da expressão. Esse tipo de ferramenta se chama REPL (read-eval-print-loop), que significa laço de leia-avalie-imprima. Ele lê o que você digita, avalia a expressão e depois imprime o resultado. Você vai usar muito essa ferramenta na sua jornada, brinque um pouco com ela. Tente outras expressões matemáticas ali.

Lembra das quatro operações básicas da matemática? soma, subtração, multiplicação e divisão? Vamos usar todas aqui no console? use o símbolo + para soma, - para subtração, * para multiplicação e / para divisão.

Digite no console as seguintes operações:

  • 1 + 1
  • 2 * 3
  • 5 * 5
  • 4 / 2

Mas Javascript não tem só expressões matemáticas. Com ele você pode mudar a página atual, mover os elementos da tela, postar mensagens, e muito mais. No mesmo console que você abriu antes, entre com o seguinte comando:

window.location = 'https://leomoura.org'

Você acabou de mudar o endereço da página! Mais adiante vamos entender o que significa tudo isso. Vamos aprender a adicionar e remover elementos da página e vamos até criar um jogo! Mas você ainda tem muitas aventuras para viver até lá.

Você encontra seu velho pai da porta de casa. Ele está na sua velha cadeira de balanço a moldar um pedaço de madeira.

“Finalmente chegou sua hora meu filho” - ele resmunga - “Eu tenho certeza que você será o melhor programador que esse mundo já viu.”

“Me dedicarei todos os dias, Pai. O importante é praticar todos os dias”

Seu pai então lhe entrega algo que esteve na família há muitas gerações: a variável.

A variável

você obteve var

Você obteve: variável - Com a variável você pode armazenar resultados de expressões para usar em outras expressões.

Até agora só tínhamos colocado um monte de expressões matemáticas no console. Agora vamos colocar o resultado dessas expressões em uma variável. Digite o seguinte código:

 var x = 1 + 1

A palavra undefined vai aparecer na tela, não se preocupe com ela por enquanto. Isso só significa que o resultado da nossa expressão é undefined. Mas Isso não quer dizer que nada aconteceu. O que temos agora é que a palavra x agora é uma variável, e armazena o valor 2. Digite x agora no console e veja o que acontece.

> x
2

Agora digite x + 2.

> x + 2
4

Onde usávamos um número, agora podemos usar uma variável. Então a expressão 2 + 2 é igual a expressão x + 2 se o valor que está armazenado em x é 2.

Para declarar variáveis é sempre da mesma maneira: a palavra var seguida do identificador da variável seguido de um igual e de uma expressão.

var identificador = expressão

Crie três variáveis: uma chamada um que você vai atribuir 1, uma chamada dois que você vai atribuir o valor 2 e outra chamada tres (sem acento) que você vai atribuir o valor 3.

Agora availe a expressão um + dois + tres. Qual o resultado?

Você encontra com seu amigo Josias no caminho para fora da cidade. Ele lhe diz:

“Eu não acredito que você tem a variável! você sabia que você pode sobrescrever o valor que está na variável?”

“Como assim?”, você pergunta.

“Vamos dizer que eu criei uma variável chamada contador e atribuí a ela o valor 0, eu posso mudar seu valor escrevendo contador = 2. Tenta aí.”

“Nossa! É tanta coisa que eu acho que não vou conseguir aprender tudo.” você responde, meio desanimado.

Josias lhe toca o braço, com os olhos brilhando e diz: “Eu sempre soube que você seria um mago do Javascript. É só aprender uma coisa de cada vez. E não ter medo de errar. Essa é a grande vantagem que temos: você nunca vai quebrar nada tentando coisas no console”.

Uma vez declarada (criada a variável com var), uma variável pode ser reescrita quantas vezes você quiser. Você pode usar até mesmo o valor dela mesma na expressão. Por exemplo:

> var contador = 0

> contador = contador + 1
1
> contador = contador + 1
2

dica: se você apertar a tecla para cima, a última expressão digitada vai aparecer.

“Até aí tudo bem. Mas até agora eu só digitei coisas no console. Como o Javascript roda de verdade?”

Quando você entra em um site, o seu navegador busca uma página. Essa página é escrita em uma linguagem chamada HTML. Você provavelmente já deve ter visto essa palavra no final de um endereço. O arquivo HTML é só um arquivo de texto que descreve como a página deve ser mostrada pelo seu navegador. Ele contém texto, um título e também contém uma lista de arquivos que o seu navegador vai ter que buscar. Esses arquivos podem ser dos mais variados tipos: imagens, vídeos, arquivos de áudio e também scripts. Veja um exemplo de arquivo HTML abaixo:

<!DOCTYPE html>
<html>
  <head>
    <title>Título da minha página</title>
    <meta charset="utf-8"/>

    <script src="script.js"></script>
  </head>
  <body>
    Aqui vai o texto
  </body>
</html>

Se seu navegador fosse carregar o arquivo acima, ele colocaria a frase Título da minha página no título da aba. Ele iria também colocar o texto Aqui vai o texto na sua tela e ele iria baixar e executar o script script.js.

Um script é simplesmente um arquivo de texto que contém uma lista de expressões essas expressões vão ser executadas de cima para baixo, uma a uma, até que o arquivo acabe.

Você pode ver o código fonte de qualquer site na Web. Vá no seu site preferido agora e pressione ctrl + U. Você poderá ver o código HTML da página.

Crie dois arquivos em seu computador, um chamado index.html e outro chamado script.js. No primeiro coloque o código html que vimos acima. No script.js coloque apenas a seguinte linha: alert(1 + 1). É importante que você escreva exatamente isso. Agora clique duas vezes no arquivo index.html, se ele não abrir no chrome, mude o programa padrão para abrir arquivos html para ser o chrome.

Ao abrir a página que você criou, você verá um alerta que diz: “Essa página diz: 2”. Parabéns, você criou o seu primeiro script.

A partir de agora vamos começar a trabalhar com scripts. Quando você estiver com dúvidas sobre alguma coisa na linguagem você pode abrir o console e testar coisas. Eu faço isso o tempo todo. Frequentemente você terá dúvidas sobre alguma construção da linguagem, se alguma função altera o objeto ou se retorna um novo objeto, se as parênteses influenciam no resultado, etc. Antes de sair procurando no Google, tente as expressões no console. Quando praticamos algo, aprendemos muito mais rápido.

Para facilitar sua vida eu recomendo que você utilize uma IDE. Uma IDE é um programa feito para desenvolver. Eu recomendo o Atom (atom.io), que é feito pelo Github.

Uma outra alternativa é o Cloud9 (c9.io). O Cloud9 é uma IDE que roda no browser. Você desenvolve e salva tudo online e pode acessar de qualquer lugar. Você pode inclusive testar tudo no browser mesmo. Você pode escolher dentre diversos tipos de projeto, selecione ‘HTML5’. Veja a imagem abaixo,

Criando um workspace no Cloud9

Scripts

Tudo que você pode fazer no console, pode fazer em scripts. Lembra quando incrementamos o contador? vamos fazer o mesmo agora em um script.

No exercício anterior usamos um alert. Ele é uma função do Javascript que cria uma janela de alerta na tela do browser. Vamos aprender mais sobre funções no futuro. Só vamos aprender como usá-lo por enquanto. Para usar um alert, Vamos escrever alert, seguido de (, depois nossa expressão, por exemplo contador, terminando com ‘)’.

var contador = 1
alert(contador)

Funciona! Você deve ter notado que até você clicar ok, o conteúdo da página não aparece. Isso acontece porque nosso script está incluído no cabeçalho do documento (dentro de <head/>). Assim, primeiro o script todo é rodado para só depois termos o conteúdo da página carregado. O alerta bloqueia a execução de tudo, então tanto o resto do script, quanto o conteúdo da página só executa depois que o usuário clicar ok.

O script é basicamente uma lista de comandos, como se fosse uma receita de bolo. Colocamos um comando por linha. Os comandos são executados um a um. A ordem é importante. Por exemplo, imagine se nossa receita fosse:

misture os ingredientes
leve ao forno
adicione a cobertura

Seria bem diferente escrever a seguinte receita:

misture os ingredientes
adicione a cobertura
leve ao forno

Levaríamos a cobertura ao forno e não ficaria tão bom o bolo. Funciona da mesma forma com programação. O seguinte programa:

var contador = 1
contador = contador + 1
alert(contador)

Vai exibir 2 da tela. Enquanto que o programa:

var contador = 1
alert(contador)
contador = contador + 1

Vai exibir 1 na tela.

Um monge encapuzado se aproxima de você.

“Meu jovem”, ele diz com uma voz rouca, soando como alguém de mais de cem anos. “Você está aprendendo a fazer scripts. Preciso lhe dar um aviso importante. No final de cada expressão, é importante usar um ponto e vírgula.”

“Mas eu ouvi dizer que se eu não colocar ponto e vírgula, o Javascript vai colocá-lo automaticamente para mim. Por que me preocupar com isso então, monge?”

“Você ainda é jovem. Um dia vai entender a sabedoria de milênios, mas em alguns casos a inserção de ponto e vírgula pode causar erros sutis e difíceis de detectar. Vou lhe dar um exemplo, se você não entendê-lo, guarde com você e volte no futuro quando estiver mais forte.”

“Veja o seguinte código (suponha que teste seja uma função):”

var b = teste
(function() {
// faz algo
})()

“Na primeira linha, estamos atribuindo uma função a uma variável. Na segunda estamos chamando uma função anônima. Ignore por enquanto porque estamos fazendo isso. O que vai acontecer é que o ponto e vírgula não vai ser adicionado na primeira linha devido as regras de inserção automática do ponto e vírgula. e a função anônima vai ser passada como parâmetro para a função teste.”

“Não entendi muito bem. Ainda estou no capítulo 1”, você responde confuso.

“Muito bem. Volte aqui quando tiver aprendido sobre funções. Só quero que você se lembre do seguinte: sempre termine expressões com ponto e vírgula!”

Quando o velho monge disse a palavra “vírgula”, um trovão ecoou nos céus. Você fechou os olhos do susto e quando abriu o velho não estava mais lá.

“Sempre usarei ponto e vírgula” Você disse ao cruzar o portões do vilarejo.

Até o final da nossa jornada vamos entender porque se deve usar sempre o ponto e vírgula, por enquanto vamos reescrever nosso script:

var contador = 1;
contador = contador + 1;
alert(contador);

O resultado do script acima é o mesmo, mas usando o ponto e vírgula vamos evitar muita dor de cabeça.

* * *

Condicionais - A Planície Lógica

Status do capítulo: rascunho.

O Vilarejo dos Newbies agora já está fora do seu campo de visão. Você vê uma grande planície verdejante. Espalhados esparsamente no seu campo de visão alguns arbustos e pedras.

Um barulho de cascos de cavalo se aproxima. Um cavaleiro com uma armadura brilhosa montado em um cavalo negro com crinas longas. Ao chegar mais perto ele remove a viseira do seu capacete e numa voz muito mais fina do que você esperava, ele lhe diz:

“Você é um bug?”

“Não! eu venho do Vilarejo dos Newbies.”

“Ah, então poderei deixar você passar. Você está indo para aonde?” ele responde, desafinando entre uma palavra e outra.

“Estou indo para a Caverna da Recursão aprender Javascript”.

Ele lhe olha de cima a baixo, como quem não acredita muito que um Newbie conseguirá um dia aprender a linguagem sagrada. Meio hesitante, e agora sem desafinar, ele lhe alerta:

“A ponte do stream está bloqueada. Você terá que dar a volta no rio.”

””

Vimos no capítulo anterior que um programa é como uma receita. Adicione água, adicione farinha, mexa a mistura, etc. O que dá poder aos nossos programas é a capacidade de se comportar diferente dependendo da situação.

Até agora nossos scripts executavam todas as linhas, uma a uma. Agora vamos ver como fazemos para algumas linhas não serem executadas, dependendo do valor das variáveis. Vamos escrever um script para substituir o cavaleiro que acabamos de encontrar.

O Cavaleiro

Veja o código a seguir. Leia atentamente e tente entender o que está acontecendo. Aqui temos muitas coisas novas e vamos passar com cuidado por cada uma delas.

var pergunta = "Você é um bug?";
var ehBug = prompt(pergunta);

if (ehBug === 'sim') {
  alert('Atacar!');
}

A primeira coisa a se notar é que estamos atribuindo uma frase à variável pergunta. Até agora só tínhamos atribuído números às variáveis. Mas além de números, podemos também atribuir frases. Porém para que o interpretador entenda que estamos passando uma frase e não uma variável, usamos aspas (""). Assim nossas frases podem até mesmo conter espaços. Então tente ver a diferença: Quando fazemos var x = pergunta, estamos fazendo x apontar para o conteúdo da variável pergunta. O seguinte código:

var pergunta = 1;
var x = pergunta;
alert(x);

Vai mostrar o valor 1 na tela.

Já quando fazemos var x = "pergunta", estamos fazendo x apontar para a frase pergunta (que no caso é uma frase com uma palavra só). Assim, o código:

var x = "pergunta";
alert(x);

Vai mostrar pergunta na tela.

A segunda coisa nova é o comando prompt. Ele é bem similar ao alert. A diferença é que ele contêm um campo que o usuário preenche. A frase que o usuário vai preencher no prompt vai ser atribuída a variável ehBug.

Note que os nomes das variáveis vão se distinguir pelas letras maiúsculas e minúsculas. A variável ehbug vai ser diferente de ehBug. Tome muito cuidado com isso.

A seguir temos a linha mais importante e essencial do nosso script. Para entendê-la, vamos primeiro aprender sobre condicionais. O if funciona da seguinte maneira: a palavra-chave if seguida por uma expressão entre parênteses (). Depois temos várias expressões dentro de chaves { }. As expressões que estão dentro das chaves, nos vamos chamar de bloco. Se a expressão que está dentro das parênteses for verdadeira, então o bloco vai ser executado. Caso contrário, o bloco vai ser ignorado e nada vai ser executado.

if (expressão) {
  expressão;
  expressão;
  expressão;
}

Mas o que significa dizer que uma expressão é verdadeira? Vamos fazer um exercício para entender melhor.

De volta ao console. Vamos tentar alguns comandos. Primeiro digite:

2 === 2

Isso é 2 seguido de três sinais de igual e 2 de novo. Você vai ver o resultado true aparecer no seu console. O que estamos fazendo aqui é testando se dois é igual a dois. Isso é uma comparação. Vamos tentar outro agora:

2 === 5

Agora estamos comparando 2 com 5. O resultado vai ser false.

O que estamos fazendo é uma pergunta. A diferença é que expressamos ela de forma matemática. A pergunta dois é igual a dois? vira a expressão 2 === 2. Se a resposta da pergunta for sim, a expressão avalia para true. Se for não, avalia para false.

Além de igualdade, podemos usar outros símbolos para fazer outras perguntas. Alguns deles são:

  • x === y o valor de x é igual ao valor de y?
  • x !== y o valor de x é diferente do de y?
  • x < y o valor de x é estritamente menor do que o de y?
  • x <= y o valor de x é menor ou igual ao de y?
  • x > y o valor de x é estritamente maior do que o de y?
  • x >= y o valor de x é maior ou igual ao de y?

Agora é sua vez, crie duas variáveis x e y e tente cada um das expressões acima. Depois mude os valores das variáveis e tente as expressões de novo (lembre-se que apertando a tecla para cima você pode reavaliar expressões passadas).

Agora que entendemos expressões que são perguntas. Podemos entender o if. Se o que estiver dentro da parênteses do if avaliar para verdadeiro, então as expressões de dentro do bloco vão ser avaliadas. Vamos ver um exemplo:

var x = 1;

if (x === 1) {
  alert('Atacar!');
}

Esse script vai mostrar o alerta Atacar! na tela. Já o seguinte script:

var x = 1;

if (x === 2) {
  alert('Atacar!');
}

Não vai mostrar nada na tela. Quando o if for executado, a expressão de dentro do parênteses x === 2 vai ser avaliada para false. Assim o bloco alert(atacar) não vai ser executado e nada vai ser exibido.

Sem executar o seguinte script, você consegue dizer o que vai acontecer ao executarmos o seguinte script:

if (x === 1) {
  alert('Atacar!');
}

var x = 1;

Agora tente executá-lo. Você consegue explicar o que aconteceu? lembre que a ordem das expressões é importante.

Agora podemos entender o script do início dessa sessão. Vamos vê-lo novamente:

var pergunta = "Você é um bug?";
var ehBug = prompt(pergunta);

if (ehBug === 'sim') {
  alert('Atacar!');
}

Na primeira linha estamos definindo uma variável que contêm a pergunta que será exibida na tela (você é um bug?). Na segunda estamos definindo a variável ehBug como a frase que usuário vai digitar no prompt.

Finalmente estamos testando se o que o usuário digitou foi a palavra sim. Caso isso seja verdade (a expressão ehBug === 'sim' avalie para true), vamos mostrar o alerta Atacar! na tela.

É importante perceber que se o usuário digitar qualquer outra coisa, como claro, com certeza, etc, o alerta não vai ser exibido. Mesmo se o usuário escrever Sim (com letra maiúscula) ou colocar um espaço no final, não exibiremos o alerta. O usuário tem que digitar exatamente a palavra sim (sem espaço e em minúsculas) para que o alerta seja exibido.

Agora podemos aposentar o cavaleiro e deixar o nosso script como guardião da planície lógica. Agora o cavaleiro pode serguir seu sonho de virar um malabarista itinerante.

A encruzilhada

Você já está andando há horas seguindo a margem do rio. Uma placa indica duas direções a seguir. Para esquerda ela indica Castelo das Listas e para a direita, Ruínas dos Símbolos.

Para onde vamos? deveríamos ter trazido um mapa.

Vamos escrever um script para tomar essa decisão.

var pergunta = "Digite sim para seguir para o Castelo das Listas";
var decisao = prompt(pergunta);

if (decisao === 'sim') {
  alert('Você foi para o castelo das listas');
}
alert('Você foi para as Ruínas dos Símbolos');

Nosso script tem um erro. Tente executá-lo. No caso do usuário digiar sim, os dois alertas serão executados. Mas gostaríamos que somente um deles fosse. O que fazer?

Quando queremos executar um bloco de código em um certo caso e outro bloco somente no outro, podemos usar o else.

if (expressão A) {
  expressão B;
  expressão C;
} else {
  expressão X;
  expressão Y;
}

O else vai logo depois de um if. O que acontece é que se a expressão A for avaliada para true, as expressões B e C vão ser executadas e X e Y nunca serão executadas. Caso a expressão A seja avaliada para false, é o contrário: X e Y são executadas e B e C nunca serão.

Vamos voltar ao nosso script.

var pergunta = "Digite sim para seguir para o Castelo das Listas";
var decisao = prompt(pergunta);

if (decisao === 'sim') {
  alert('Você foi para o castelo das listas');
} else {
  alert('Você foi para as Ruínas dos Símbolos');
}

Eliminamos nosso erro. Agora se o usuário digitar sim, somente o primeiro alerta vai ser executado.

A decisão do nosso script é ir para o castelo das listas. Para exercitarmos o uso do if e else, vamos inverter a decisão. Sua missão é modificar o script para perguntar se o usuário vai para as Ruínas dos Símbolos. Mude a pergunta e mude a posição dos alertas.

Mas e se tivéssemos mais de duas opções? podemos usar else if para adicionar quantos caminhos quisermos no nosso script. Veja a nossa modificação:

var pergunta = "Para aonde você quer ir?";
var aonde = prompt(pergunta);

if (aonde === 'castelo das listas') {
  alert('Você foi para o castelo das listas');
} else if (aonde === 'vilarejo dos newbies') {
  alert('Você foi para o vilarejo dos newbies');
} else {
  alert('Você foi para as Ruínas dos Símbolos');
}

Sempre que nosso script rodar, apenas um dos três alertas vai ser executado. Se nenhuma das condições dentros dos ifs for verdadeira. Então entraremos na opção que tem o else. Podemos juntar quantos else ifs quisermos. E podemos também não ter nenhum else. Poderíamos fazer assim também:

if (aonde === 'castelo das listas') {
  alert('Você foi para o castelo das listas');
} else if (aonde === 'vilarejo dos newbies') {
  alert('Você foi para o vilarejo dos newbies');
} else if (aonde === 'ruínas dos símbolos') {
  alert('Você foi para as Ruínas dos Símbolos');
}

A diferença desse para o anterior é que se o usuário digitar qualquer coisa que não seja uma das opções, nenhum dos alertas vai ser executado. Quando deixamos um else no final das nossa condicionais, ele sempre vai ser executado se as outras opções não forem.

Ser ou não ser

Com as condicionais podemos fazer os comportamentos mais variados no nosso script. Por exemplo, podemos fazer com que quando o usuário apertar três vezes em um botão, um alerta apareça na tela. Vamos aprender como interagir com a página no capítulo 4.

Depois de caminhar por dias, decidindo se if ou else, e já sem nenhuma comida em sua mochila, finalmente você avista um castelo. Uma placa de madeira corroída por cupins indica: Castelo das Listas.

* * *

Vetores - O Castelo das Listas

Status do capítulo: pré-rascunho.

Ao caminhar em direção a entrada da cidade, você é barrado por um cavaleiro de armadura. Ele não fala nada, só aponta para o lado. Três pessoas estão em uma fila. Para entrar no castelo, você precisa ficar na fila.

A pessoa no final da fila se apresenta: “Eu sou Ronaldo, aqui no castelo das listas, para tudo tem fila. Você simplesmente não entra em um lugar sem ficar numa fila.”

Temos três pessoas na fila: Ronaldo, Ana e Marcelo.

var pessoa1 = 'Marcelo';
var pessoa2 = 'Ana';
var pessoa3 = 'Ronaldo';

Agora para percorrer nossa fila o que fazemos?

alert(pessoa1 + ' entrou no castelo');
alert(pessoa2 + ' entrou no castelo');
alert(pessoa3 + ' entrou no castelo');

Esse código fica muito repetitivo. Se quisermos adicionar mais uma pessoa na fila, teremos que adicionar outro alert. E se não sabemos no início do script quantas pessoas vão estar na nossa fila?

Imagine que estamos escrevendo um script para transformar todos os links da nossa página em botões. Precisamos de uma forma de representar listas de coisas. Todos os links de uma página, todos os botões, todos os amigos do Facebook.

Em Javascript, representamos listas como Arrays, ou vetores. Veja como ficaria nossa lista:

var pessoas = ['Marcelo', 'Ana', 'Ronaldo'];

Uma array é representada por um colchete [, seguidos dos itens do array separados por vírgulas e terminado o fecha colchete ]. Uma array vazia (ninguém na fila!) é representada simplesmente por abre e fecha colchetes:

var listaVazia = [];
var listaComUmElemento = [1];
var listaComDoisElementos = [1, 2];

Agora como fazemos para fazer essas pessoas entrarem no castelo sem ficar copiando e colando código?

O interpretador do Javascript não é muito inteligente, temos que explicar exatamente o que ele tem que fazer. Então não adiantaria dizer para ele:

Faça todas as pessoas entrarem na fila.

Temos que ser muito mais detalhados:

Enquanto ainda existem pessoas na lista de pessoas, faça a primeira pessoa
na fila entrar no castelo e depois retire a primeira pessoa da fila.

Para entender bem como isso funciona, vamos ver como ficaria a execução dessas instruções:

Ainda existem pessoas na fila? sim, temos Ronaldo, Ana e Marcelo.
faça a primeira pessoa na fila (Ronaldo) entrar no castelo.
retire a primeira pessoa da fila (Ronaldo)
Ainda existem pessoas na fila? sim, temos Ana e Marcelo.
faça a primeira pessoa na fila (Ana) entrar no castelo.
retire a primeira pessoa da fila (Ana)
Ainda existem pessoas na fila? sim, temos Marcelo.
faça a primeira pessoa na fila (Marcelo) entrar no castelo.
retire a primeira pessoa da fila (Marcelo)
Ainda existem pessoas na fila? não, lista vazia

A cada passo estamos checando uma condição, se a condição ainda for verdadeira, continuamos executando um bloco de código. Essa estrutura em Javascript é o while, ele é usado da seguinte maneira:

while (condição) {
  expressão;
  ...
  expressão;
}

Como fica nosso código usando o while?

var pessoas = ['Marcelo', 'Ana', 'Ronaldo'];

while (pessoas.length > 0) {
  alert(pessoas[0] + ' entrou no castelo');
  pessoas.shift();
}

Temos coisas novas aqui. Vamos passo a passo vendo o que temos de novo.

A primeira coisa nova é o while, como vimos antes, temos a palavra-chave while seguido de abre chaves {. Depois temos um bloco de dois comandos e para sinalizar que nosso bloco acabou, temos o fecha chaves }.

A condição do while é pessoas.length > 0. O que .length nos dá é o tamanho de nossa array.

Vamos ver como funciona .length. Abra o terminal e digite:

[1,2,3].length

O valor retornado será 3, porque a array tem três elementos. Vamos tentar com uma array vazia, que valor será retornado?

[].length

O .length funciona também em variáveis que apontam para arrays. Veja o seguinte código, que valor vai ser exibido no terminal?

var numeros = [1,2,3];
numeros.length

Nossa condição pessoas.length > 0 vai ser verdadeira para qualquer lista que tiver o tamanho maior que zero, então na primeira vez que fizer o teste, pessoas.length vai ser 3, logo 3 > 0 vai ser verdadeiro. Enquanto a condição for verdadeira, vamos executar o bloco de código.

Agora passamos para dentro do bloco, temos a linha alert(pessoas[0] + ' entrou no castelo');. O que pessoas[0] retorna?

Usamos colchetes [] para acessar elementos da lista.

var numeros = [1,2,3]
numeros[0]

Então pessoa[0] vai ser igual à primeira pessoa da array.

Agora temos a última linha do nosso script, pessoas.shift();. Chegou a hora de entender o que significa o ponto (.). Até agora vimos o ponto em duas ocasiões: na linha window.location = 'https://leomoura.org' do capítulo 1 e em pessoas.length. Note que o ponto sempre opera sobre uma variável. Temos

variável . propriedade.

Então por exemplo, se nossa variável fosse uma pessoa, poderíamos usar pessoa.idade, e isso iria nos dar a idade da pessoa. Mais para frente vamos aprender como definir essas variáveis com propriedades, por enquanto vamos só aprender a usar as que o Javascript nos dá.

Quando usamos pessoas.shift(), estamos pegando a propriedade shift da array pessoas. Mas depois da propriedade temos esse (). O que isso significa?

* * *

DOM - Dom Manuel, o Rei da Organização

Status do capítulo: pré-rascunho.

Depois de horas na fila, finalmente lhe é concedido uma audiência com Dom Manuel, o rei da organização.

“Espero que esse seja o último, Lançarote”. - Disse o rei da organização, já pensando em como iria organizar seus aposentos essa noite. - “Se aproxime estrangeiro. Que queres de nós, os grandes reis da organização”.

“Vossa majestade organizacional, eu venho do Vilarejo dos Newbies e quero me tornar um mago do Javascript! me disseram que Vossa majestade poderia me ajudar”.

“HAHAHA! um newbie quer ser um mago do Javascript? Me diga uma coisa, newbie, você por acaso sabe HTML?”.

Um calafrio percorreu sua espinha. Um pensamento gélido lhe ocorre: “Eu vim de tão longe para aprender com os maiores mestres, porém não sei um dos blocos construtores da Web, o HTML”. Você começa em seguida a responder o rei:

“Não, vossa majestade, até agora aprendi somente os rudimentos do Javascript. Mas no vilarejo me disseram que se eu aprendesse um bom Framework eu não precisaria saber HTML”.

“HAHAHAHA novamente. É impossível ser um programador Web sem saber HTML. HTML é a base de tudo que nós conhecemos. Não importa quais as tecnologias que rodam no servidor ou no cliente, tudo na Web é renderizado do HTML”.

HTML significa HyperText Markup Language, que é traduziada para Linguagem de Marcação de Hipertexto. Mas o que significa isso? primeiro temos que enteder o que é uma linguagem de marcação. Até agora vimos o Javascript, que é uma linguagem de programação. Uma linguagem de marcação, assim como a de programação, tem as suas próprias regras de gramática, mas é muito mais simples. Ela serve para estruturar os documentos e não para gerá-los, como é o caso da linguagem que é o tema desse livro.

Agora a segunda parte: o que é Hipertexto?

* * *

Funções - A caverna da recursão

Status do capítulo: pré-rascunho.

Não se vê nada na caverna da recursão. Uma neblina densa cobre a visão. Sorte que Dom Manuel lhe deu a lanterna do debug. Com a lanterna é possível ver uma placa na parede da caverna. Na placa se lê:

Para chegar se chegar no fim da caverna:

  1. Ande um passo
  2. É o fim da caverna? Pare!
  3. Leia essa placa novamente

Essa placa faz referência a si mesma. Isso é recursão?

Até agora usamos o comando alert. Como por exemplo no código:

alert("olá mundo");

Bom, o alert é uma função. Nesse capítulo vamos aprender como definir funções.

* * *

Objetos - As Relíquias do Rei

Status do capítulo: pré-rascunho.

Ao passar pelos portões turquesa, e depois de tanta escuridão, seus olhos se ofuscam com o brilho estarrecedor da próxima sala. Desde o teto adornado em ouro e pedras preciosas até o chão metálico e brilhante, tudo brilha na sala do rei.

Através de um alçapão no centro do teto, a luz do sol entra e reflete em milhares de moedas de ouro e prata espalhadas como dunas de areia no amplo salão secreto. Baús fechados e abertos se espalham por todos os cantos, assim como armaduras, espadas, pergaminhos e pratos dourados.

Finalmente você chegou no salão das relíquias do rei, e aqui se encontra o bem mais precioso do rei: O Objeto.

Até agora vimos que podemos guardar vários tipos diferentes de valores em variáveis: números (42, -1, 0.3333, 1e-10), booleanos (true, false), sequências de caracteres ('samambaia', 'Vilarejo dos Newbies'), vetores ([], [1,2,3]) e até funções (console.log, function() {}).

Finalmente chegamos ao último tipo de valor que se pode armazenar em variáveis: O Objeto.

Um objeto é um agrupamento lógico de valores que funcionam como uma unidade.

Está confuso? Objetos são representações lógicas de coisas. A melhor maneira de entender objetos é pensar em alguns exemplos de objetos que podemos definir em Javascript. São exemplos de objetos: janela, div, pessoa, gato, botao, inimigo, gerenciadorDeJanelas, heroi, gerenciadorDeSom.

Já lidamos com objetos durante nossa aventura, um exemplo é quando usamos console.log. No caso console é um objeto. Um dos atributos de console é log, que é uma função. O objeto console também possui vários outros atributos como: error, debug, info.

Abra o console e execute os diferente métodos de console:

  • console.log('teste')
  • console.debug('teste')
  • console.info('teste')
  • console.error('teste')

Veja qual a diferença entre o que aparece no console com cada comando.

Para criarmos nosso próprios objetos colocamos uma lista de atributos entre chaves({}). Cada atributo é composto de um identificador seguido por : e depois o seu valor.

var bill = {
  nome: 'Bill',
  idade: 20,
};

Uma vez criado o objeto, para acessarmos seus atributos usamos um ponto .:

> bill.nome
"Bill"
> bill.idade
20

Depois de criado podemos adicionar ou remover atributos de um objeto. Vamos adicionar o atributo altura ao objeto bill:

bill.altura = 175;

Agora vamos remover a idade:

delete bill.idade;

Agora no console vemos que bill foi modificado:

> bill
Object {nome: "Bill", altura: 175}

“Pera lá. Por que usar esse objetos aí? parece que está complicando minha vida. Eu não poderia simplesmente criar variáveis chamadas bill_nome e bill_idade e teria o mesmo efeito”.

Calma lá jovem gafanhoto. Objetos são muito mais poderosos do que variáveis. eles não são simplesmente agrupamentos de atributos. Um objeto define um tipo. Se criarmos os objetos seguindo um certo padrão, podemos criar funções genéricas que podem ser usadas várias vezes ao invés de só em um caso específico. Se quiséssemos criar uma função que mostra informações do usuário na tela, teríamos que criar uma função específica exibe_bill e depois se criássemos um outro usuário marcelo, teríamos que ter uma outra função exibe_marcelo. Vamos ver a seguir como isso pode ser usado na prática.

Primeiro criaremos um outro objeto rosa com os mesmos atributos que bill:

var rosa = {
  nome: 'Rosa',
  idade: 21,
  altura: 170
};

Agora vamos criar uma função genérica loga_pessoa, que imprime informações sobre uma pessoa:

function loga_pessoa(pessoa) {
  console.log('nome', pessoa.nome);
  console.log('idade', pessoa.idade);
  console.log('altura', pessoa.altura);
}

Agora não precisamos repetir o código várias vezes, para imprimir informações dos usuários só fazemos:

> loga_pessoa(bill);
nome Bill
idade 20
altura 175

> loga_pessoa(rosa);
nome Rosa
idade 21
altura 170

Note que se tentarmos usar nossa função com um outro objeto que não tem todos os atributos que estamos esperando, o resultado vai ser diferente

> loga_pessoa({ nome: 'jose' })
nome jose
idade undefined
altura undefined

Métodos

* * *

Módulos - O Despertar do Dragão da Complexidade

Status do capítulo: pré-rascunho.

Você sabia que não seria tão fácil sair do salão das relíquias do rei carregando o objeto. Ao passar pelo portão turquesa você ouve um som monstruoso que parece o rugido de cem leões, o berro de cem elefantes e o brame de cem ursos.

Você desertou o dragão da complexidade.

* * *