Introduo

continuam por a, basta saber onde procur-las. Uma linguagem

especfica chamada JavaScript est presente em praticamente todos

Esse livro sobre como fazer com que os computadores faam

os navegadores e, por isso, est disponvel em quase todos os

exatamente o que voc quer que eles faam. Hoje em dia, os

aparelhos.

computadores so to comuns quanto as chaves de fenda, mas

Esse livro tem o objetivo de familiariz-lo o suficiente com essa
possuem uma complexidade escondida que os torna mais difceis de
linguagem para que voc seja capaz de fazer com que o computador
se operar e entender. Para muitos, eles continuam sendo no muito
faa o que voc quiser.
familiares e ameaadores.

Sobre Programao
Eu no esclareo aqueles que no tm vontade de aprender, nem
desperto aqueles que no esto ansiosos para dar uma explicao a
si mesmos. Se eu mostrei um lado de um quadrado e eles no
conseguem chegar nos outros trs, eu no deveria passar pelos
mesmos pontos novamente.
Ns encontramos duas maneiras efetivas para aproximar o espao
vazio que existe na comunicao entre ns, organismos biolgicos
com um talento para o raciocnio espacial e social, e os
computadores, que no possuem sentimentos e so apenas
manipuladores de dados. A primeira delas, baseada em usar nosso
senso do mundo fsico e construir interfaces que simulam esse
mundo, permitindo manipular estruturas na tela com os nossos
dedos. Isso funciona muito bem para interaes casuais com a
mquina.

Entretanto, ainda no encontramos uma maneira boa de usar a

abordagem de apontar e clicar para comunicar ao computador as
coisas que o designer da interface no previu. Para interfaces mais
gerais, como instruir o computador a executar tarefas arbitrrias,
tivemos mais sorte com uma abordagem que utiliza nosso talento

Confcio
Antes de explicar o JavaScript, irei introduzir tambm os princpios
bsicos de programao. Programao de fato difcil. As regras
fundamentais

so

geralmente simples

e claras.

Entretanto,

programas construdos em cima dessas regras tendem a se tornar

complexos, introduzindo suas prprias regras e complexidades
adicionais. De certa forma, voc estar construindo o seu prprio
labirinto e, talvez, possa acabar se perdendo nele.

Haver momentos de frustrao quando estiver lendo esse livro e, se

voc novo em programao, haver uma grande quantidade de
material para ser digerido. Durante a leitura, muitos desses conceitos
sero combinados de vrias formas, forando-o a fazer novas
conexes.

para linguagem: ensinar uma linguagem mquina.

Fica a seu critrio saber qual o nvel de esforo necessrio. Quando
As linguagens humanas possibilitam que palavras e frases sejam
combinadas de diferentes maneiras, nos permitindo falar diferentes
coisas. As linguagens de computador, normalmente menos flexveis
em sua gramtica, seguem um princpio similar.

O uso da computao casual se tornou cada vez mais popular nos

ltimos vinte anos e as interfaces baseadas em linguagens, que era
a forma na qual as pessoas interagiam com os computares, foram
amplamente substitudas por interfaces grficas. Mesmo assim, elas

estiver passando por dificuldades para acompanhar o livro, no tire

concluses imediatas sobre sua prpria capacidade. Voc estar
bem, apenas no desista. Tire um tempo de descanso, releia algum
material anterior e sempre se certifique de que leu e entendeu os
programas apresentados nos exemplos e nos exerccios. Aprender
um trabalho rduo, mas tudo o que for aprendido ser completamente
seu e ajudar com que o aprendizado posterior seja ainda mais fcil.

O programador um criador de universos nos quais ele o nico

regras rgidas ("boas prticas") recomendando a forma que os

responsvel. Universos com complexidades totalmente ilimitadas

programas deveriam ter. Os mais zelosos entre eles, vo considerar

podem ser criados na forma de programas de computador.

como maus programadores aqueles que saem dessa pequena zona

de segurana.

Joseph Weizenbaum, Computer Power and Human Reason

Quanta hostilidade em relao riqueza da programao, tentar
Um programa pode ser considerado muitas coisas. Ele um pedao
reduzi-l a algo simples e previsvel, colocando um tabu em todos os
de texto digitado por um programador, a fora que direciona o
estranhos e bonitos programas. A dimenso das tcnicas de
computador a fazer o que ele faz e, tambm, os dados contidos na
programao enorme e fascinante em sua diversidade e, ainda
memria do computador, controlando as aes executadas nessa
assim, amplamente inexplorada. certamente muito perigoso atrair
mesma memria. Analogias que tentam comparar programas aos
programadores inexperientes nesses tipos de confuses, entretanto,
objetos que conhecemos, normalmente tendem a ser insuficientes.
voc deve seguir com cautela e manter o seu senso comum em
Uma dessas comparaes superficiais com uma mquina, com
relao a elas. Conforme voc aprende, sempre haver novos
vrias partes separadas que normalmente esto relacionadas e, para
territrios e desafios a serem explorados. Programadores que se
fazer com que a mquina toda funcione, precisamos considerar a
recusam a continuar explorando iro estagnar, esquecer da alegria
maneira nas quais essas partes esto conectadas e como cada uma
que programar e acabaro ficando entediados com as coisas que
contribui para a operao da mquina como um todo.
constroem.
Um computador uma mquina construda para atuar como um

Porque linguagens importam?

hospedeiro para essas mquinas imateriais. Os computadores por si

ss, conseguem apenas fazer coisas fceis e pouco complicadas. A
razo deles serem to teis, que eles conseguem executar essas
coisas em uma velocidade incrivelmente rpida. Um programa pode
combinar uma grande quantidade dessas coisas simples a fim de
executar coisas mais complicadas.

No incio, quando a computao nasceu, no haviam linguagens de

programao. Os programas eram parecidos com algo assim:
00110001
00110001
00110011
01010001
00100010
01000011
01000001
00010000
01100010

00000000
00000001
00000001
00001011
00000010
00000001
00000001
00000010
00000000

00000000
00000001
00000010
00000010
00001000
00000000
00000001
00000000
00000000

Para alguns de ns, escrever programas de computador um

Esse um programa que soma os nmeros de 1 a 10 e imprime o
fascinante jogo. Um programa uma construo do pensamento.
resultado: 1

+ 2 + + 10 = 55.

Ele poderia ser executado em qualquer

No possui custos de construo, leve e cresce facilmente com a

mquina simples. Para programar os computadores antigos, era
digitao feita por nossas mos.
necessrio configurar longos conjuntos de chaves na posio correta
Entretanto, se no formos cuidadosos, o tamanho e a complexidade

ou, ento, fazer perfuraes em cartes que eram usados para

de um programa pode crescer e ficar fora de controle, confundindo,

alimentar o computador. Voc provavelmente deve estar imaginando

at mesmo, a pessoa que o criou. Manter os programas sob controle

como tedioso e propenso a erros esse procedimento era. At para

o maior desafio da programao. Quando um programa funciona,

escrever programas simples precisava de muita habilidade e

lindo. A arte de programar , basicamente, a habilidade de controlar

disciplina. Os programas mais complexos eram praticamente

a complexidade. Um timo programa suave e simples em sua

inimaginveis de serem criados.

prpria complexidade.

claro que inserir esses padres "arcanos" de bits (zeros e uns) dava
ao programador a profunda sensao de ser um poderoso mago, e

Muitos programadores acreditam que essa complexidade melhor

gerenciada usando, em seus programas, apenas um pequeno
conjunto de tcnicas bem entendidas. Eles criaram uma srie de

isso devia significar alguma coisa em relao ao sentimento de

satisfao em seu trabalho.

Cada linha do programa contm uma simples instruo. Isto pode ser

No

escrito assim:

operao console.log

1.
2.
3.
4.
5.
9.
6.
7.
8.
9.

escrevemos isso como output (sada).

Guarde o nmero 0 na posio da memria 0.

Guarde o nmero 1 na posio da memria 1.
Guarde o valor da posio da memria 1 na posio da memria 2.
Subtraia o nmero 11 do valor na posio da memria 2.
Se o valor na posio da memria 2 o nmero 0, continue com a instruo

final

do

programa,

depois

aplicada

ao

de while ser
resultado

ordem

a
que

Finalmente, aqui temos o que o programa pode parecer se ns

tivermos as operaes convenientes

Adicione o valor da posio da memria 1 para posio de memria 0.

Adicione o nmero 1 ao valor da posio de memria 1.
Continue com a instruo 3.
Retorne o valor da posio da memria 0.

na

definido,

range

(alcance) e sum(soma)

disponveis, que respectivamente criam uma coleo de nmeros

Embora isto seja mais legvel que a sopa de bits, ainda continua

com um alcance e computam a soma de uma coleo de nmeros:

console.log(sum(range(1,10)));
// 55

bastante desagradvel. Pode ser de auxlio usar nomes ao invs de

A moral da histria, ento, que o mesmo programa pode ser

nmeros para as instrues e locaes de memria:

expresso de forma longa e curta, de forma legvel ou no. A primeira

Configure "total" para 0

Configure "count" para 1
[loop]
Configure "compare" para "count"
Subtraia 11 de "compare"
Se "compare" zero, continue at [fim]
Adicione "count" em "total"
Adicione 1 em "count"
Continue at [loop]
[fim]
Sada "total"

verso do programa foi extremamente obscura, enquanto esta ltima

praticamente "Ingls": log (registre) a sum(soma) da range (extenso)
dos nmeros de 1 a 10. (Ns vamos ver nos prximos captulos como
criar coisas do tipo sume range).

Neste ponto no to difcil ver como os programas trabalham. Voc

consegue? As primeiras duas linhas fornecem duas locaes de
memria que iniciam os valores: total vai ser usado para construir o
resultado da computao, e count mantm registrado o nmero que
ns atualmente estamos olhando. As linhas usando

compare

so

provavelmente as mais estranhas. O que o programa quer fazer ver

Uma boa linguagem de programao ajuda o programador

permitindo-o conversar sobre aes que o computador vai realizar
em alto nvel. Isto ajuda a deixar detalhes desinteressantes implcitos,
e

fornece

construes

convenientes

de

blocos

(como

o while e console.log), permitindo a voc definir seus prprios blocos

(como sum e range), e tornando simples a construo destes blocos.

se j pode parar. Por causa da nossa mquina hipottica ser bastante

primitiva, ela somente pode testar se um nmero zero e fazer a

O que JavaScript?

deciso (salto) baseado nisto. Ento, ela usa a locao de memria

O JavaScript foi introduzido em 1995, como uma forma de adicionar
rotulada compare para computar o valor de count - 11 e fazer a deciso
programas a pginas da web no navegador Netscape. A linguagem
baseada neste valor. As prximas duas linhas adicionam o valor
foi adaptada pela maioria dos navegadores grficos da web. Ele fez
de count ao resultado e incrementam

count

por 1 cada vez que o

a atual gerao de aplicaes web possvel - clientes de email

programa decide que no 11 ainda.

baseado no navegador, mapas e redes sociais - e tambm usado
Aqui temos o mesmo programa em JavaScript:
em sites mais tradicionais para fornecer vrias formas de
var total = 0, count = 1;
while (count <= 10) {
total += count;
count += 1;
}
console.log(total);

interatividade e inteligncia.

importante notar que JavaScript no tem quase nada a ver com a

Isso nos d muitas melhorias. E o mais importante, no preciso

linguagem de programao Java. O nome similar foi inspirado por

mais especificar o caminho que ns queremos que o programa salte

consideraes de marketing, ao invs do bom senso. Quando o

anteriormente ou adiante. Ele continua executando o bloco (envolvido

JavaScript foi introduzido, a linguagem Java estava sendo fortemente

nas chaves) at que a condio que foi dada seja:

que

divulgada e ganhando popularidade. Algum pensou ser uma boa

significa "count menor que ou igual a 10". No temos mais que criar

ideia tentar trilhar junto com este sucesso. Agora estamos

um valor temporrio e compar-lo a zero. Isso um detalhe

emperrados com este nome.

count <= 10,

desinteressante, e o poder das linguagens de programao que

Depois da adoo fora do Netscape, um documento padro foi escrito
elas tomam conta de detalhes desinteressantes para ns.
para descrever uma forma que a linguagem deve trabalhar, com um

esforo para certificar-se que as vrias partes do software que

JavaScript como sua linguagem de consulta e script. Muitas

afirmavam suportar JavaScript estavam realmente falando sobre a

plataformas para desktop e de programao no servidor, mais notvel

mesma linguagem. Foi chamado de padro ECMAScript, depois da

o projeto Node.JS, sujeito do captulo (AINDA NO ESCRITO),

organizao ter feito a padronizao. Na prtica, os termos

fornecem um poderoso ambiente de programao JavaScript fora do

ECMAScript e JavaScript podem ser usados como sinnimos - so

navegador.

dois nomes para a mesma linguagem.

Cdigo, e o que fazer com ele

Tem alguns que vo dizer coisas horrveis sobre a linguagem

JavaScript. Muitas dessas coisas so verdade. Quando eu fui
obrigado a escrever algo em JavaScript, pela primeira vez, eu
rapidamente vim a desprez-lo - ele poderia interpretar qualquer
coisa que eu digitei, mas interpretava de uma forma completamente
diferente do que eu quis dizer. Isso teve muito a ver com o fato de
que eu no tinha a menor ideia do que estava fazendo, claro, mas h
uma questo real aqui: JavaScript ridiculamente liberal no que ele
permite. A ideia por trs deste padro foi que isto tornaria a
programao em JavaScript simples para iniciantes. Na realidade, na
maior parte das vezes isto torna a deteco de problemas em seus
programas difcil, porque o sistema no vai apont-lo para voc.

Esta flexibilidade tambm tem suas vantagens. Isso d espao para

muitas tcnicas que so impossveis em linguagens mais rgidas, e,
como iremos ver em captulos posteriores, isto pode ser usado para

Cdigo o texto que compe os programas. Muitos captulos deste

livro contm muito cdigo. Em minha experincia, escrever e ler
cdigos uma importante parte do aprendizado da programao.
Tenta no apenas olhar sobre os cdigos, leia-os atenciosamente e
os entenda. Isto pode ser lento e confuso no incio, mas eu prometo
que voc vai rapidamente pegar o jeito. O mesmo acontece para os
exerccios. No assuma que voc os entendeu at que voc
realmente tenha escrito uma soluo que funcione.

Eu recomendo que voc teste suas solues dos exerccios em um

interpretador JavaScript real, para obter um feedback se o que voc
fez est funcionando ou no, e, esperanosamente, ser incentivado
a experimentar e ir alm dos exerccios.

Quando ler este livro no seu navegador, voc pode editar (e rodar) os
programas exemplo clicando neles.

superar algumas deficincias do JavaScript. Depois de aprender

corretamente e trabalhar com o JavaScript por um tempo, eu aprendi

Rodando programas JavaScript fora do contexto deste livro

a realmente gostar desta linguagem.

possvel tambm. Voc pode optar por instalar o node.js, e ler a

documentao para conhecer como us-lo para avaliar arquivos de

Tivemos vrias verses do JavaScript. Verso 3 do ECMAScript foi a

dominante, largamente suportado no tempo que o JavaScript
ascendia para o domnio, aproximadamente entre 2000 e 2010.
Durante este tempo, trabalho estava em andamento na verso 4
ambiciosa, que planeja um nmero de melhorias e extenses radicais
para a linguagem. Porm, mudar de forma radical uma linguagem
largamente usada pode ser politicamente difcil, e o trabalho na

texto que contm programas. Ou voc pode usar o console de

desenvolvedores no navegador (tipicamente encontrado no menu
"tools" ou "developer") e divertir-se nele. No captulo (CORRIGIR!), o
jeito que os programas so embutidos em pginas web (arquivos
HTML)

explicado.

Entretanto,

voc

pode

verificar

em http://jsbin.com por outra interface amigvel para rodar cdigo

JavaScript no navegador.

verso 4 foi abandonado em 2008, e conduzido para a 5 edio que

saiu em 2009. Estamos agora esperando que todos os maiores

Convenes Tipogrficas

navegadores suportem a 5 edio, que a linguagem da verso que

este livro vai focar. O trabalho na 6 edio est em curso.

Neste livro, texto escrito em fonte monoespaada deve ser entendido por
representaes de elementos dos programas - algumas vezes so

Navegadores web no so as nicas plataformas que o JavaScript

usado. Alguns banco de dados, como MongoDB e CouchDB, usam

fragmentos auto-suficientes, e algumas vezes eles somente

referenciam para alguma parte de um programa prximo. Programas

so os bits que compem o nmero treze, com o valor dos dgitos

(que voc j viu um pouco), so escritos assim:

mostrados abaixo deles:

function fac(n) {
if (n == 0)
return 1;
else
return fac(n - 1) * n;
}

0
128

Algumas vezes, para mostrar a sada que o programa produz, a

Valores

0
64

0
32

0
16

1
8

1
4

0
2

1
1

Ento este o 00001101, ou 8 + 4 + 1, que equivale a 13.

mesma ser escrita abaixo dele, com duas barras e uma seta na
frente:

Imagine um mar de bits. Um oceano deles. Um computador moderno

console.log(fac(8));
// 40320

tem mais de trinta bilhes de bits em seu armazenamento voltil

(memria RAM). De armazenamento no-voltil (o disco rgido ou

Boa Sorte!

Valores,
Tipos
Operadores

equivalente) tende a ter uma ordem de magnitude ainda maior.

Abaixo da parte superficial da mquina, existe um programa que

desloca-se. Sem esforo, ele se expande e se contrai. Com grande
harmonia, os eltrons se espalham e se reagrupam. As formas no
monitor so como ondulaes na gua. A essncia permanece
invisvel por baixo.

Master Yuan-Ma, The Book of Programming

Dentro do mundo do computador, h somente dados. Ns podemos

ler dados, modificar dados, criar dados - mas coisas que no so
representadas por dados simplesmente no existem. Todos estes
dados so armazenados em longas sequncias de bits, e isso
portanto fundamentalmente parecido.

Bits podem ser qualquer tipo de coisa com 2 valores, usualmente

descrito como 0 e 1. Dentro do computador, eles tomam formas como
uma carga eltrica alta ou baixa, um forte ou fraco sinal, ou um ponto
brilhante ou sem brilho na superfcie de um CD. Qualquer pedao de
uma discreta informao, pode ser reduzida para uma sequncia de
0 e 1, e ento representanda por bits.

Para trabalhar com estes sem se perder, ns temos que estrutur-los

de alguma forma. Uma forma de fazer agrup-los dentro de
pedaos que representam uma simples parte de informao. Em um
ambiente JavaScript, todo os dados so separados em coisas
chamadas valores, grupos de bits que representam um pedao de

Como um exemplo, pense sobre a maneira que o nmero 13 pode

dado coerente.

ser armazenado em bits. A forma usual de se fazer esta analogia a

forma de escrevermos nmeros decimais, mas ao invs de 10 dgitos,
temos apenas 2. E, ao invs de o valor de um dgito aumentar dez
vezes sobre o dgito aps ele, o valor aumenta por um fator 2. Estes

Embora todos os valores sejam feitos da mesma coisa uniforme, eles

desempenham papis diferentes. Todo valor tem um tipo, que
determina o tipo de papel que desempenha. Temos seis tipos bsicos

de valores no JavaScript: nmeros, strings, booleans, objetos,

Todos

os

nmeros

funes e valores indefinidos.

JavaScript number.

abaixo

Estes

bits

de

18

tambm

quintilhes

cabem

armazenam

no

nmeros

negativos, onde um destes sinais usado para guardar o sinal do

Em ingls: [number, string, boolean, object, function, undefined]
Para criar um valor, deve-se simplesmente invocar seu nome. Isto
muito conveniente. Voc no tem que recolher material para construir
seus valores ou pagar por eles; voc s chama por um, e pronto, voc
o tem. Eles no so criados com ar, obviamente. Todo valor tem que

nmero. Uma grande questo que nmeros no inteiros podem ser

representados. Para fazer isso, alguns bits so usados para guardar
a posio do ponto decimal do nmero. O maior nmero no inteiro
que pode ser armazenado est na faixa de 9 quadrilhes (15 zeros) que continua muito grande.

ser armazenado em algum lugar, e se voc quer usar uma quantidade

gigante deles, ao mesmo tempo voc deve rodar sobre os bits.

Nmeros fracionados so escritos usando o ponto:

Felizmente, este um problema somente se voc os quiser

9.81

simultaneamente. Assim que voc no usar mais um valor, ele ser

Para grandes nmeros ou nmeros pequenos, podemos usar a

dissipado, deixando para trs os bits para serem reciclados e se

notao cientfica adicionando um 'e', seguido do expoente:

tornarem materiais para a prxima gerao de valores.

2.998e8

Isto 2.998 x 10 = 299800000.

Este captulo introduz os elementos atmicos dos programas
JavaScript: Simples tipos de valores, e operadores que podem atuar

Clculos com nmeros inteiros (tambm chamados integers)

em cada valor.

menores que os mencionados 9 quadrilhes so garantidos de

Nmeros

sempre serem precisos. Infelizmente clculos com nmeros

fracionrios no so, geralmente. Como (pi) no pode ser

Valores do tipo numbers so, previsivelmente, valor numricos. Em

um programa JavaScript, eles so escritos usualmente assim:

precisamente expresso por uma quantidade finita de dgitos decimais,

vrios nmeros perdem a preciso quando somente 64 bits esto
disponveis para armazen-los. Isto uma vergonha, porm causa

13

Coloque isto em um programa, e isto vai gerar o padro de bits para

que o nmero 13 comece a existir dentro do computador.

problemas somente em situaes muito especficas. O importante

estar ciente disto e tratar nmeros fracionrios digitais como
aproximaes, no como valores precisos.

O JavaScript usa um nmero fixo de bits, 64 deles, para armazenar

Aritmtica

um nico valor numrico. Isto significa que existe uma quantidade

limite de tipos diferentes de nmeros que podem ser representados h muitos padres diferentes que voc pode criar com 64 bits. O
conjunto de nmeros podem ser representados por N dgitos
decimais 10^N. Similarmente, o conjunto de nmeros que podem

A principal coisa a se fazer com nmeros aritmtica. Operaes

aritmticas como adio e multiplicao pegam o valor de dois
nmeros e produzem um novo nmero a partir deles. Aqui vemos
como eles so no JavaScript:

ser representados por 64 dgitos binrios 2, que mais ou menos

100 + 4 * 11

18 quintilhes (um 18 com 18 zeros aps ele).

Isto muito. Nmeros exponenciais tem o hbito de ficarem grandes.

J foi o tempo que as memrias eram pequenas e as pessoas
tendiam a usar grupos de 8 ou 16 bits para representar estes
nmeros. Era fcil de acidentalmente "transbordarem" estes
pequenos nmeros. Hoje, temos o luxo de somente se preocupar
quando realmente lidamos com nmeros astronmicos.

Os smbolos + e * so chamados operadores. O primeiro representa

adio, e o segundo representa multiplicao. Colocando um
operador entre 2 valores faz com que se aplique o mesmo,
produzindo um novo valor.
O prximo exemplo significa "adicione 4 e 100, e multiplique o
resultado por 11", ou a multiplicao feita antes da adio? Como
voc deve ter pensado, a multiplicao acontece primeiro. Mas, como

na matemtica, isto pode ser mudado envolvendo a adio com os

O prximo tipo bsico de dado a string. Strings so usadas para

parnteses:

representar texto. Elas so escritas delimitando seu contedo entre

(100 + 4) * 11

aspas:

Para subtrao, este o operador -, e para a diviso usamos este

"Patch my boat with chewing gum"

'Monkeys wave goodbye'

operador /.

Ambas as aspas simples e duplas podem ser usadas para marcar

Quando operadores aparecem juntos sem parnteses, a ordem que

eles

vo ser

aplicados

determinada

strings - contanto que as aspas no incio e no fim da string combinem.

pela precednciados

operadores. O exemplo mostra que a multiplicao vem antes da

Quase tudo pode ser colocado entre aspas, e o JavaScript vai fazer

adio. / tem a mesma precedncia de *. Igualmente para + e -.

um valor de string com isso. Mas alguns caracteres so difceis. Voc

Quando mltiplos operadores com a mesma precedncia esto

pode imaginar como colocar aspas entre aspas deve ser difcil. Novas

prximos uns aos outros (como em1

linhas, as coisas que voc obtm quando pressiona

- 2 + 1),

eles so aplicados da

enter,

tambm

esquerda para a direita.

no podem ser colocadas entre aspas - a string tem que estar em

Estas regras de precedncia no algo que voc deva se preocupar.

uma linha nica.

Quando em dvida, somente adicione parnteses.

Para ser capaz de ter estes caracteres em uma string, a conveno

seguinte usada: Sempre que um barra invertida \ encontrada

H mais um operador aritmtico, que possivelmente menos familiar.

O smbolo % usado para representar o restante da operao. X
o restante da diviso de X
% 12

por Y.

Por exemplo, 314

% 100

% Y

produz 14, e 144

nos d 0. A precedncia deste operador igual a da multiplicao

e diviso. Voc tambm pode ver este operador sendo referido como
"mdulo" (porm tecnicamente "restante" mais preciso).

dentro do texto entre aspas, isto indica que o caracter depois desta
tem um significado especial. Uma aspa precedida de uma barra
invertida no vai findar a string, mas ser parte dela. Quando um
caracter 'n' correr depois de uma barra invertida, ser interpretado
como uma nova linha. Similarmente, um 't' depois da barra invertida
significa o caracter tab. Veja a string seguinte:
"This is the first line\nAnd this is the second"

Nmeros Especiais
O verdadeiro texto contido :
Existem 3 valores especiais no JavaScript que so considerados

This is the first line

And this is the second

nmeros, mas no comportam-se como nmeros normais.

Existe, obviamente, situaes onde voc quer uma barra invertida em
Os dois primeiros so Infinity e -Infinity, que so usados para

uma string apenas como uma barra invertida. no um cdigo especial.

representar os infinitos positivo e negativo.

continua

Se duas barras invertidas estiverem seguidas uma da outra, elas se

sendo Infinity, e assim por diante. Mas no ponha muita confiana

anulam, e somente uma vai ser deixada no valor da string resultante.

neste tipo de computao baseada em infinito, pois uma

Assim como a string A

matemtica pesada, e vai rapidamente levar para nosso prximo

written:
"A newline character is written like \"\\n\"."

Infinity

newline character is written like "\n" can be

nmero especial: NaN.

Strings no podem ser divididas, multiplicadas ou subtradas, mas o
NaN

significa "not a number" (no um nmero). Voc obtm isso

operador + pode ser usado nelas. Ele no adiciona, mas concatena -

quando declara 0

/ 0

(zero dividido por zero),

Infinity - Infinity,

ou
ele cola duas strings unindo-as. A linha seguinte vai produzir a

qualquer nmero de outra operao numrica que no produz um

string concatenate:
preciso e significante valor.

"con" + "cat" + "e" + "nate"

Strings

Existem outras maneiras de manipular strings, que ns vamos discutir

quando entrarmos ns mtodos no captulo 4.

Operadores Unrios

Nem todos operadores so smbolos. Alguns so palavras escritas.

nmeros prtico para guardar strings dentro do computador - voc

Um exemplo o operador typeof, que produz uma string com o valor

pode represent-los como uma sequncia de nmeros. Quando se

do tipo dado para fornecido para avaliao.

compara strings, o JavaScript vai sobre elas da esquerda para a

console.log(typeof 4.5)
// number
console.log(typeof "x")
// string

direita, comparando os cdigos numricos dos caracteres um por um.

Outros operadores similares so >= (maior que ou igual a), <= (menor

Ns vamos usar console.log nos cdigos exemplo para indicar que

que ou igual a), == (igual a) e != (no igual a).
ns queremos ver o resultado da avaliao de algo. Quando voc
roda algum cdigo, o valor produzido vai ser mostrado na tela - de
alguma forma, dependendo do ambiente JavaScript que voc usa

console.log("Itchy" != "Scratchy")
// true

H somente um valor no JavaScript que no igual a ele mesmo,

que o NaN (not a number).
console.log(NaN == NaN)
// false

para rod-lo.
Os outros operadores que vimos sempre operam

com 2

NaN

(not a number) supostamente define o resultado de uma

valores; typeof pega somente um. Operadores que usam 2 valores

operao sem sentido, e como tal, no ser igual ao resultado

so chamados operadores binrios, enquanto aqueles que pegam

de outra operao sem sentido.

um so chamados operadores unrios. O operador menos - pode ser

Operadores Lgicos

usado como operador binrio e unrio.

console.log(- (10 - 2))
// -8

Temos tambm algumas operaes que podem ser aplicadas aos

Valores Booleanos

valores

booleanos.

JavaScript

suporta

operadores

lgicos: e, ou ou no.
As vezes, voc vai precisar de um valor que simplesmente distingue
entre 2 possibilidades, "sim" ou "no", ou "ligado" e "desligado". Para

O operador && representa o e lgico. um operador binrio, e seu

isso o JavaScript tem um tipo booleano, que tem apenas dois

resultado true (verdadeiro) somente se ambos os valores dados a

valores, true e false (que so escritos com estas palavras mesmo).

ele forem true.

Comparaes
Aqui temos uma maneira de produzir valores booleanos:
console.log(3 > 2)
// true
console.log(3 < 2)
// false

console.log(true && false);

// false
console.log(true && true);
// true

O operador || denota ao ou lgico. Ele produz true se algum dos

valores fornecidos for true:
console.log(false || true);
// true
console.log(false || false);
// false

Os sinais > e < so tradicionalmente smbolos para " maior que" e "
No escrito com uma exclamao !. um operador unrio que
menor que". Eles so operadores binrios, e o resultado da aplicao
inverte o valor dado a ele - !true produz false e!false produz true.
deles um valor booleano que indica se eles so verdadeiros neste
Quando misturamos estes operadores booleanos com operadores
caso.
aritmticos e outros operadores, no sempre bvio quando o
Strings podem ser comparadas da mesma forma:
parnteses necessrio. Na prtica, voc precisa conhecer sobre os
console.log("Aardvark" < "Zoroaster")
// true

operadores que vimos antes, e que || tem o mais baixo nvel de

A maneira que as strings so ordenadas mais ou menos alfabtica:

precedncia, seguido do &&, e ento os operadores de comparao

Letras maisculas so sempre "menores" que as minsculas,

(>, ==, e outros), e depois o resto. Sendo assim, como vemos na

ento "Z"

expresso abaixo, os parnteses poucas vezes so necessrios.

< "a"

true, e caracteres no alfabticos ('!', '-', e assim por

1 + 1 == 2 || 10 * 10 <= 100

diante) so tambm includos na ordenao. A maneira real da

comparao feita baseada no padro Unicode. Este padro atribui
um nmero a todo caracter virtual que pode ser usado, incluindo
caracteres da Grcia, Arbia, Japo, Tamil e por ai vai. Ter estes

Valores Indefinidos

Temos dois valores especiais,

e undefined, que so usados para

casos ir ocorrer a tentativa de converso de um dos valores para o

denotar a ausncia de valores significativos. Eles so por si prprios

tipo do outro valor. Contudo, quando nullou undefinedocorrem em

valores, porm valores que no levam informao.

algum dos lados do operador, isso produzir true somente se ambos

Muitas operaes na linguagem que no produzem valores

os lados forem

significativos (vamos ver algumas no prximo captulo) vo

A ltima parte do comportamento frequentemente muito til.

produzir undefined,

Quando voc quer testar se um valor tem um valor real, em vez de

null

simplesmente

porque

elas

tem

que

null

ou undefined.

retornar algum valor.

ser null ou undefined, voc pode simplesmente compar-lo a null com

A diferena de significado entre undefined e null em grande parte

o operador == (ou !=).

desinteressante e um acidente no projeto do JavaScript. Nos casos

Mas e se voc quiser testar se algo se refere ao valor preciso

que voc realmente tiver que se preocupar com estes valores, eu

As regras de converso de strings e nmeros para valores booleanos

recomendo trat-los como substituveis (mais sobre isso em um

afirmam que 0, NaN e empty strings contam como false, enquanto

momento).

todos os outros valores contam como

Converso Automtica de Tipo

expresses como 0

== false

e ""

== false

true.

false?

Por causa disso,

retornam

true.

Para casos

assim, onde vocno quer qualquer converso automtica de tipos

Na introduo, eu mencionei que o JavaScript no iria atrapalh-lo e
aceitaria quase qualquer coisa que voc o fornecesse, mesmo
quando isso confuso e errado. Isto muito bem demonstrado por

acontecendo, existem dois tipos extras de operadores:

===

e !==. O

primeiro teste se o valor precisamente igual ao outro, e o segundo

testa se ele no precisamente igual. Ento ""

=== false

falso como

esperado.

esta expresso:

Usar
console.log(8 * null)
// 0
console.log("5" - 1)
// 4
console.log("5" + 1)
// 51
console.log("five" * 2)
// NaN
console.log(false == 0)
// true

os

operadores

de

comparao

de

trs

caracteres

defensivamente, para prevenir inesperadas converses de tipo que o

faro tropear, algo que eu recomendo. Mas quando voc tem
certeza de que os tipos de ambos os lados sero iguais, ou que eles
vo ser ambos null/undefined, no h problemas em usar os

Quando um operador aplicado a um tipo de valor "errado", ele vai

operadores curtos.

silenciosamente converter este valor para o tipo que quiser, usando

um conjunto de regras que frequentemente no so as que voc

O Curto-Circuito de && e ||

expera. O null na primeira expresso torna-se 0, o "5" na segunda

expresso se torna 5 (de string para nmero), ainda na terceira
expresso, o + tenta a concatenao de strings antes de tentar a
adio numrica, o 1 convertido em "1" (de nmero para string).
Quando algo que no pode ser mapeado como um nmero de forma
bvia, do tipo "five" ou undefined convertido para um nmero, o
valor NaN produzido. Operaes aritmticas com

NaN

continuam

produzindo NaN, ento se voc encontrar alguns destes resultados em

algum local inesperado, procure por converses acidentais de tipo.
Quando comparamos coisas do mesmo tipo usando ==, o resultado
bastante fcil de se prever - voc vai obter truequando ambos os
valores forem os mesmos. Mas quando os tipos diferem, o JavaScript
usa um complicado e confuso conjunto de regras para determinar o
que fazer. Eu no vou explicar isto precisamente, mas na maioria dos

Os operadores lgicos && e || tem uma maneira peculiar de lidar com

valores de tipos diferentes. Eles vo converter o valor sua esquerda
para o tipo booleano a fim de decidir o que fazer, mas ento,
dependendo do operador e do resultado da converso, eles ou
retornam o valor esquerda original, ou o valor direita.
O operador || vai retornar o valor sua esquerda quando ele puder
ser convertido em true, ou valor sua direita caso contrrio. Ele faz a
coisa certa para valores booleanos, e vai fazer algo anlogo para
valores de outros tipos. Isso muito til, pois permite que o operador
seja usado para voltar um determinado valor predefinido.
console.log(null || "user")
// user
console.log("Karl" || "user")
// Karl

O operador && trabalha similarmente, mas ao contrrio. Quando o

No Captulo 1 ns criamos alguns valores e ento aplicamos

valor sua esquerda algo que se torne false, ele retorna o valor, e

operadores para obter novos valores. Criar valores desta forma uma

caso contrrio ele retorna o valor sua direita.

parte essencial de todo programa JavaScript, mas isso somente

Outro importante propriedade destes 2 operadores que a expresso

uma parte. Um fragmento de cdigo que produz um valor chamado

a sua direita avaliada somente quando necessrio. No caso de true

de expresso.

|| X,

no importa o que X - pode ser uma expresso que faa

(como 22 ou "psychoanalysis") uma expresso. Uma expresso entre

algo terrvel - o resultado vai ser verdadeiro, e X nunca avaliado. O

parnteses tambm uma expresso, e tambm um operador binrio

mesmo acontece para false

aplicado a duas expresses, ou um unrio aplicado a uma.

&& X,

que falso, e vai ignorar X.

Todo

valor

que

escrito

literalmente

Isso mostra parte da beleza da interface baseada na linguagem.

Resumo

Expresses podem ser encadeadas de forma semelhante s subNs vimos 4 tipos de valores do JavaScript neste captulo. Nmeros,

frases usadas na linguagem humana - uma sub-frase pode conter sua

prpria sub-frase, e assim por diante. Isto nos permite combinar

strings, booleanos e valores indefinidos.

expresses para expressar computaes complexas arbitrariamente.

Alguns valores so criados digitando seu nome (true, null) ou valores
(13, "abc"). Eles podem ser combinados e transformados com
operadores. Ns vimos operadores binrios para aritmtica (+, -, *, /,
e %),

um

para

concatenao

de

string

(+),

comparao

(==, !=, ===, !==, <, >, <=, >=) e lgica (&&, ||), como tambm vrios
operadores unrios (- para negativar um nmero, ! para negar uma
lgica, e typeof para encontrar o tipo do valor).
Isto lhe d informao suficiente para usar o JavaScript como uma
calculadora de bolso, mas no muito mais. O prximo captulo vai

Se uma expresso corresponde a um fragmento de sentena,

uma afirmao, no JavaScript, corresponde a uma frase completa em
linguagem humana. Um programa simplesmente uma lista de
afirmaes.

O tipo mais simples de afirmao uma expresso com um ponto e

vrgula depois dela. Este o programa:
1;
!false;

comear a amarrar essas operaes bsicas conjuntamente dentro

um programa intil, entretanto. Uma expresso pode ser apenas

de programas bsicos.

para produzir um valor, que pode ento ser usado para fechar a

Estrutura do Programa

expresso. Uma declarao vale por si s, e s equivale a alguma

coisa se ela afeta em algo. Ela pode mostrar algo na tela - que conta
como mudar algo - ou pode mudar internamente o estado da mquina

O meu corao vermelho brilha nitidamente sob minha pele e ele tm

que administrar 10cc de JavaScript para fazer com que eu volte (Eu
respondi bem a toxinas no sangue). Cara, esse negcio vai chutar os
pssegos de direita para fora!

de uma forma que vai afetar outras declaraes que iro vir. Estas
mudanas so chamadas efeitos colaterais. As afirmaes nos
exemplos anteriores somente produzem o valor 1 e true e ento
imediatamente os jogam fora novamente. No deixam nenhuma
impresso no mundo. Quando executamos o programa, nada

_why, Why's (Poignant) Guide to Ruby

acontece.

Este o ponto onde ns comeamos a fazer coisas que podem

Ponto e vrgula

realmente ser chamadas de programao. Ns vamos expandir

nosso domnio da linguagem JavaScript para alm dos substantivos

Em alguns casos, o JavaScript permite que voc omita o ponto e

e fragmentos de sentenas que ns vimos anteriormente, para o

vrgula no fim de uma declarao. Em outros casos ele deve estar l

ponto onde poderemos realmente expressar algo mais significativo.

ou coisas estranhas iro acontecer. As regras para quando ele pode

Expresses e Afirmaes

ser seguramente omitido so um pouco complexas e propensas a

erro. Neste livro todas as declaraes que precisam de ponto e

mantm tem o poder de ser acessado por ele. Quando voc precisa

vrgula vo sempre terminar com um. Eu recomendo a voc fazer o

se lembrar de algo, voc aumenta o tentculo para segurar ou

mesmo em seus programas, ao menos at voc aprender mais sobre

recoloca um de seus tentculos existentes para fazer isso.

as sutilezas envolvidas em retirar o ponto e vrgula.

Quando voc define uma varivel sem fornecer um valor a ela, o

Variveis

tentculo fica conceitualmente no ar - ele no tem nada para segurar.

Quando voc pergunta por um valor em um lugar vazio, voc recebe

Como um programa mantm um estado interno? Como ele se lembra

o valor undefined.

das coisas? Ns vimos como produzir novos valores com valores

antigos, mas isso no altera os valores antigos, e o valor novo deve
ser imediatamente usado ou vai ser dissipado. Para pegar e guardar
valores, o JavaScript fornece uma coisa chamada varivel.
var caught = 5 * 5;

E isso nos d um segundo tipo de declarao. A palavra especial

(palavra-chave) var indica que esta sentena vai definir uma varivel.
Ela seguida pelo nome da varivel e, se ns quisermos d-la
imediatamente um valor, por um operador = e uma expresso.
A declarao anterior criou uma varivel chamada

caught

e a usou

para armazenar o valor que foi produzido pela multiplicao 5 por 5.

Depois de uma varivel ter sido definida, seu nome pode ser usado
como uma expresso. O valor da expresso o valor atual mantido
pela varivel. Aqui temos um exemplo:
var ten = 10;
console.log(ten * ten);
// 100

Nomes de variveis podem ser quase qualquer palavra, menos as

reservadas para palavras-chave (como var). No pode haver espaos
includos. Dgitos podem tambm ser parte dos nomes de variveis

Um exemplo. Para lembrar da quantidade de dlares que Luigi ainda

- catch22 um nome vlido, por exemplo - mas um nome no pode

lhe deve, voc cria uma varivel. E ento quando ele lhe paga 35

iniciar com um dgito. O nome de uma varivel no pode incluir

dlares, voc d a essa varivel um novo valor.

pontuao, exceto pelos caracteres $ e _.

var luigisDebt = 140;

luigisDebt = luigisDebt - 35;
console.log(luigisDebt);
// 105

Quando uma varivel aponta para um valor, isso no significa que

estar ligada ao valor para sempre. O operador = pode ser usado a
qualquer hora em variveis existentes para desconect-las de seu

Palavras-chave
Reservadas

Palavras

valor atual e ento apont-las para um novo:

var mood = "light";
console.log(mood);
// light
mood = "dark";
console.log(mood);
// dark

Palavras que tem um significado especial, como

usadas

como

nomes

de

chamadas keywords (palavras-chave).

var,

variveis.
Existe

no podem ser
Estas

tambm

so

algumas

Voc deve imaginar variveis como tentculos, ao invs de caixas.

palavras que so reservadas para uso em futuras verses do
Elas no contm valores; elas os agarram - duas variveis podem
JavaScript. Estas tambm no so oficialmente autorizadas a serem
referenciar o mesmo valor. Somente os valores que o programa
utilizadas como nomes de variveis, embora alguns ambientes

JavaScript as permitam. A lista completa de palavras-chave e

a string que foi passada como o texto a ser mostrado na caixa de

palavras reservadas um pouco longa:

dilogo. Os valores passados para funes so chamados

break case catch continue debugger default delete do else false finally for f

de arguments (argumentos). A funo alert precisa somente de um

unction if implements ininstanceof interface let new null package private pro

deles, mas outras funes podem precisar de diferentes quantidades

tected public return static switch throw true trytypeof var void while with y

ou tipos de argumentos.

ield this

A Funo console.log

No se preocupe em memoriz-las, mas lembre-se que este pode ser

A funo alert pode ser til como sada do dispositivo quando

o problema quando algo no funcionar como o esperado.

experimentada, mas clicar sempre em todas estas pequenas janelas

O Ambiente

vai lhe irritar. Nos exemplos passados, ns usamos console.log para

sada de valores. A maioria dos sistemas JavaScript (incluindo todos

A coleo de variveis e seus valores que existem em um

determinado tempo chamado de environment (ambiente). Quando um
programa inicia, o ambiente no est vazio. Ele ir conter no mnimo
o nmero de variveis que fazem parte do padro da linguagem. E
na maioria das vezes haver um conjunto adicional de variveis que
fornecem maneiras de interagir com o sistema envolvido. Por
exemplo, em um navegador, existem variveis que apontam para
funcionalidades que permitem a voc inspecionar e influenciar no
atual carregamento do website, e ler a entrada do mouse e teclado

os

navegadores

modernos

Node.js),

fornecem

uma

funo console.log que escreve seus argumentos como texto na sada

do dispositivo. Nos navegadores, a sada fica no console JavaScript.
Esta parte da interface do browser fica oculta por padro, mas muitos
browsers abrem quando voc pressiona F12, ou no Mac, quando voc
pressiona Command

+ option + I.

Se isso no funcionar, busque no menu

algum item pelo nome de web console ou developer tools.

Quando rodarmos os exemplos ou seu prprio cdigo nas pginas
deste livro, o console.log vai mostrar embaixo o exemplo, ao invs de
ser no console JavaScript.

da pessoa que est usando o navegador.

var x = 30;
console.log("o valor de x ", x);
// o valor de x 30

Funes

Embora eu tenha afirmado que nomes de variveis no podem conter

Muitos dos valores fornecidos no ambiente padro so do

pontos, console.log claramente contm um ponto. Eu no tinha

tipo function (funo). Uma funo um pedao de programa

mentido para voc. Esta no uma simples varivel, mas na verdade

envolvido por um valor. Este valor pode ser aplicado a fim de executar

uma expresso que retorna o campolog do valor contido na

o programa envolvido. Por exemplo, no ambiente do navegador, a

varivel console. Ns vamos entender o que isso significa no captulo

varivel alert detm uma funo que mostra uma pequena caixa de

4.

dilogo com uma mensagem. usada da seguinte forma:

Retornando Valores

alert("Good morning!");

Mostrar uma caixa de dilogo ou escrever texto na tela um efeito

colateral. Muitas funes so teis por causa dos efeitos que elas
produzem. tambm possvel para uma funo produzir um valor, no
Executar uma funo denominado invocar, chamar ou aplicar uma
funo. Voc pode chamar uma funo colocando os parnteses
depois da expresso que produz um valor de funo. Normalmente

caso de no ser necessrio um efeito colateral. Por exemplo, temos

a funo Math.max, que pega dois nmeros e retorna o maior entre
eles:
console.log(Math.max(2, 4));

voc ir usar o nome da varivel que contm uma funo

Quando uma funo produz um valor, dito que ela retorna (return)
diretamente. Os valores entre os parnteses so passados ao
ele. Em JavaScript, tudo que produz um valor uma expresso, o
programa dentro da funo. No exemplo, a funo

alert

usou
que significa que chamadas de funo podem ser usadas dentro de

expresses maiores. No exemplo abaixo, uma chamada para a

A funo Number converte o valor para um nmero. Ns precisamos

funo Math.min, que o oposto de Math.max, usada como uma das

dessa converso pois o resultado de prompt um valor do tipo string,

entradas para o operador de soma:

ns

queremos

um

nmero.

Existem

funes

similares

console.log(Math.min(2, 4) + 100);

chamadas String e Boolean que convertem valores para estes tipos.

O prximo captulo explica como ns podemos escrever nossas
prprias funes.

prompt

Aqui podemos ver uma representao bem trivial do fluxo de controle

em linha reta:

e confirm

O ambiente fornecido pelos navegadores contm algumas outras

funes para mostrar janelas. Voc pode perguntar a um usurio uma
questo

Ok/Cancel

usando confirm.

Isto

retorna

um

valor

Execuo Condicional

booleano: true se o usurio clica em OK e falsese o usurio clica

em Cancel.

Executar declaraes em ordem linear no a nica opo que

confirm("Shall we, then?");

temos. Uma alternativa a execuo condicional, onde escolhemos

entre duas rotas diferentes baseado em um valor booleano, como
ilustra a seguir:

prompt

pode ser usado para criar uma questo "aberta". O primeiro

argumento a questo; o segundo o texto que o usurio inicia. Uma

linha do texto pode ser escrita dentro da janela de dilogo, e a funo
vai retornar isso como uma string.
prompt("Tell me everything you know.", "...");

Estas duas funes no so muito usadas na programao moderna

para web, principalmente porque voc no tem controle sobre o modo

A execuo condicional escrita, em JavaScript, com a palavra-

que a janela vai aparecer, mas elas so teis para experimentos.

chave if. No caso mais simples, ns queremos que algum cdigo

Fluxo de Controle

seja executado se, e somente se, uma certa condio existir. No

programa anterior, por exemplo, podemos mostrar o quadrado do
dado fornecido como entrada apenas se ele for realmente um

Quando seu programa contm mais que uma declarao, as

nmero.
declaraes so executadas, previsivelmente, de cima para baixo.
Como um exemplo bsico, este programa tem duas declaraes. A
primeira pergunta ao usurio por um nmero, e a segunda, que
executada posteriormente, mostra o quadrado deste nmero:
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " + theNumber * theNumber);

var theNumber = Number(prompt("Pick a number", ""));

if (!isNaN(theNumber))
alert("Your number is the square root of " +
theNumber * theNumber);

Com essa modificao, se voc fornecer "queijo" como argumento de

entrada, nenhuma sada ser retornada.

A palavra-chave if executa ou no uma declarao baseada no

resultado de uma expresso Booleana. Tal expresso escrita entre
parnteses logo aps a palavra-chave e seguida por uma declarao
a ser executada.
A

funo isNaN

retorna true apenas

uma
se

funo
o

padro

argumento

do

JavaScript

fornecido

que

for NaN.

funoNumber retorna NaN quando voc fornece a ela uma string que
no representa um nmero vlido. Por isso, a condio se traduz a
"a no ser que theNumber no seja um nmero, faa isso".
Voc frequentemente no ter cdigo que executa apenas quando
uma condio for verdadeira, mas tambm cdigo que lida com o
outro caso. Esse caminho alternativo representado pela segunda
seta no diagrama. A palavra-chave elsepode ser usada, juntamente
com if, para criar dois caminhos distintos de execuo.
var theNumber = Number(prompt("Pick a number", ""));
if (!isNaN(theNumber))
alert("Your number is the square root of " +
theNumber * theNumber);
else
alert("Hey. Why didn't you give me a number?");

Loops While e Do
Considere um programa que imprime todos os nmeros pares de 0 a

Se tivermos mais que dois caminhos a escolher, mltiplos pares

12. Uma forma de escrever isso :

de if/else podem ser "encadeados". Aqui temos um exemplo:

var num = Number(prompt("Pick a number", "0"));
if (num < 10)
alert("Small");
else if (num < 100)
alert("Medium");
else
alert("Large");

console.log(0);
console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);

Isso funciona, mas a ideia de escrever um programa fazer com que

O programa ir primeiramente verificar se num menor que 10. Se for,
algo seja menos trabalhoso, e no o contrrio. Se precisarmos de
ele escolhe esse caminho, mostra "Small" e termina sua execuo.
todos os nmeros pares menores do que 1.000, essa abordagem
Se no for, ele escolhe o caminho else, que contm o segundo if. Se
seria invivel. O que precisamos de uma maneira de repetir cdigo.
a segunda condio (< 100) for verdadeira, o nmero est entre 10 e
Essa forma de fluxo de controle chamada de lao de
100, e "Medium" ser mostrado. Caso contrrio, o segundo e
repetio (loop).
ltimo else ser escolhido.
O esquema de setas para este programa parece com algo assim:

O fluxo de controle do loop nos permite voltar a um mesmo ponto no

counter = counter + 1;
}
console.log(result);
// 1024

programa onde estvamos anteriormente e repet-lo no estado atual

do programa. Se combinarmos isso a uma varivel contadora,

O contador pode tambm iniciar com 1 e checar o valor com <=

conseguimos fazer algo assim:

mas por razes que iremos ver no Captulo 4 [TODO:] Adicionar link
correto com

var number = 0;
while (number <= 12) {
console.log(number);
number = number + 2;
}
// 0
// 2
//
etcetera

10,

ncora para a sesso mencionada no texto

original:http://eloquentjavascript.net/04_data.html#array_indexing [/T
ODO], uma boa ideia se acostumar a usar a contagem iniciando
com zero.

Uma declarao que inicia com a palavra-chave while cria um loop. A

O loop do uma estrutura de controle similar ao while. A nica

palavra while acompanhada por uma expresso entre parnteses e

diferena entre eles que o do sempre executa suas declaraes ao

seguida por uma declarao, similar ao

O loop continua

menos uma vez e inicia o teste para verificar se deve parar ou no

executando a declarao enquanto a expresso produzir um valor

apenas aps a primeira execuo. Para demonstrar isso, o teste

que, aps convertido para o tipo Booleano, seja true.

aparece aps o corpo do loop:

if.

Nesse loop, queremos imprimir o nmero atual e somar dois em

do {
var name = prompt("Who are you?");
} while (!name);
console.log(name);

nossa varivel. Sempre que precisarmos executar mltiplas

declaraes dentro de um loop, ns as envolvemos com chaves

Esse programa ir forar voc a informar um nome. Ele continuar

({ e }). As chaves, para declaraes, so similares aos parnteses

pedindo at que seja fornecido um valor que no seja uma string

para as expresses, agrupando e fazendo com que sejam tratadas

vazia. Aplicar o operador ! faz com que o valor seja convertido para

como uma nica declarao. Uma sequncia de declaraes

envolvidas por chaves chamada de bloco.

exceto "" convertem para true.

Muitos programadores JavaScript envolvem cada if e loop com

Indentando Cdigo

tipo

Booleano

antes

de

neg-lo,

todas

as

strings

chaves. Eles fazem isso tanto para manter a consistncia quanto para
evitar que seja necessrio adicionar ou remover chaves quando

Voc deve ter reparado nos espaos que coloco em algumas

houver alteraes posteriores no nmero de declaraes. Nesse

declaraes. No JavaScript, eles no so necessrios e o

livro, para sermos mais breves, iremos escrever sem chaves a

computador ir aceitar o programa sem eles. De fato, at as quebras

maioria das declaraes compostas por uma nica linha. Fique a

de linhas so opcionais. Se voc quiser, pode escrever um programa

vontade para escolher o estilo que preferir.

inteiro em uma nica linha. O papel da indentao dentro dos blocos

A varivel number demonstra uma maneira na qual variveis podem

fazer com que a estrutura do cdigo se destaque. Em cdigos

verificar o progresso de um programa. Toda vez que o loop se

complexos, onde temos blocos dentro de blocos, pode se tornar

repete, number incrementado por 2. No incio de cada repetio, ele

extremamente difcil distinguir onde um bloco comea e o outro

comparado com o nmero 12 para decidir se o programa terminou

termina. Com a indentao adequada, o formato visual do programa

de executar todo o trabalho esperado.

corresponde ao formato dos blocos contidos nele. Gosto de usar dois

Como um exemplo de algo que seja til, podemos escrever um

espaos para cada bloco, mas essa preferncia pode variar

programa que calcula e mostra o valor de 2 (2 elevado dcima

algumas pessoas usam quatro espaos e outras usam caracteres

potncia). Ns usamos duas variveis: uma para armazenar o

"tab".

resultado e outra para contar quantas vezes multiplicamos esse

Loops For

resultado por 2. O loop testa se a segunda varivel j atingiu o valor

10 e ento atualiza ambas as variveis.
Vrios loops seguem o padro visto nos exemplos anteriores do while.
var result = 1;
var counter = 0;
while (counter < 10) {
result = result * 2;

Primeiramente uma varivel "contadora" criada para monitorar o

progresso do loop. Em seguida, temos o loop while que contm uma

A construo do for nesse exemplo no contm a parte que checa

expresso de teste que normalmente checa se o contador alcanou

pelo fim do loop. Isso significa que o loop no vai parar de executar

algum limite. O contador atualizado no final do corpo do loop,

at que a declarao break contida nele seja executada.

permitindo acompanhar o progresso.

Se voc no incluir a declarao break ou acidentalmente escrever

Por esse padro ser muito comum, o JavaScript e linguagens

uma condio que sempre produza um resultado true, seu programa

similares fornecem uma forma um pouco mais curta e compreensiva

ficar preso em um loop infinito. Um programa preso em um loop

chamada de loop for.

infinito nunca vai terminar sua execuo, o que normalmente uma

for (var number = 0; number <= 12; number = number + 2)

console.log(number);
// 0
// 2
//
etcetera

coisa ruim.
Se voc criar um loop infinito em algum dos exemplos destas pginas,

Esse programa equivalente ao exemplo anterior que imprime

nmeros pares. A nica diferena que todas as declaraes
relacionadas ao "estado" do loop esto agora agrupadas.

voc normalmente ser perguntado se deseja interromper a

execuo do script aps alguns segundos. Se isso no funcionar,
voc dever fechar a aba que est trabalhando, ou em alguns casos,
fechar o navegador para recuper-lo.

Os parnteses aps a palavra-chave for devem conter dois pontos e

vrgulas. A parte anterior ao primeiro ponto e vrgulainicializa o loop,
normalmente definindo uma varivel. A segunda parte a expresso
que verifica se o loop deve continuar ou no. A parte final atualiza o
estado do loop aps cada iterao. Na maioria dos casos, essa

A palavra-chave continue similar ao break, de modo que tambm

influencia o progresso de um loop. Quando continue encontrado no
corpo de um loop, o controle de execuo pula para fora do corpo e
continua executando a prxima iterao do loop.

Atualizando variveis suscintamente

construo menor e mais clara que a do while.

Aqui est o cdigo que calcula 2 usando

for ao invs
var result = 1;
for (var counter = 0; counter < 10; counter = counter + 1)
result = result * 2;
console.log(result);
// 1024

de while:
Um programa, especialmente quando em loop, muita vezes precisa
de atualizar uma varivel para armazenar um valor baseado no valor

Repare que mesmo no abrindo o bloco com {, a declarao no loop

anterior dessa varivel.

continua indentada com dois espaos para deixar claro que ela

counter = counter + 1;

"pertence" linha anterior a ela.

O JavaScript fornece um atalho para isso:

Quebrando a execuo de um Loop

counter += 1;

Atalhos similares funcionam para outros operadores, como

Ter uma condio que produza um resultado

false

no a nica

maneira que um loop pode parar. Existe uma declarao especial

chamada break que tem o efeito de parar a execuo e sair do loop

para dobrar o result ou counter

-= 1

result *=

para diminuir um.

Isto nos permite encurtar nosso exemplo de contagem um pouco

mais:

em questo.
Esse programa ilustra o uso da declarao

break.

Ele encontra o

for (var number = 0; number <= 12; number += 2)

console.log(number);

primeiro nmero que , ao mesmo tempo, maior ou igual a 20 e

Para counter

divisvel por 7.

curtos: counter++ e counter--

for (var current = 20; ; current++) {

if (current % 7 == 0)
break;
}
console.log(current);
// 21

Usar o operador resto (%) uma maneira fcil de testar se um nmero

divisvel por outro. Se for, o resto da diviso entre eles zero.

+=

e counter

-=

1,

existem equivalentes mais

Resolvendo um valor com switch

comum que o cdigo fique assim:
if (variable == "value1") action1();
else if (variable == "value2") action2();
else if (variable == "value3") action3();
else defaultAction();

H um construtor chamado switch que se destina a resolver o envio

Em alguns casos, como a funo Number, a primeira letra da varivel

de valores de uma forma mais direta. Infelizmente, a sintaxe

capitalizada tambm. Isso feito para marcar a funo como um

JavaScript usada para isso (que foi herdada na mesma linha de

construtor. O que um construtor ser esclarecido no captulo 6. Por

linguagens de programao, C e Java) um pouco estranha -

enquanto, o importante no ser incomodado por esta aparente falta

frequentemente uma cadeia de declaraes

de consistncia.

if

continua parecendo

melhor. Aqui est um exemplo:

Comentrios

switch (prompt("What is the weather like?")) {

case "rainy":
console.log("Remember to bring an umbrella.");
break;
case "sunny":
console.log("Dress lightly.");
case "cloudy":
console.log("Go outside.");
break;
default:
console.log("Unknown weather type!");
break;
}

Frequentemente, o cdigo puro no transmite todas as informaes

necessrias que voc gostaria que tivessem para leitores humanos,
ou ele se transmite de uma forma to enigmtica que as pessoas
realmente no conseguem entend-lo. Em outras ocasies, voc est

Dentro do bloco aberto pelo switch, voc pode colocar qualquer

apenas se sentindo potico ou quer anotar alguns pensamentos

nmero de rtulo no case. O programa vai pular para o rtulo

como parte de seu programa. Os comentrios so para isto.

correspondente ao valor que switch fornece, ou para default se

nenhum valor for encontrado. Ento ele comea a executar as
declaraes, e continua a passar pelos rtulos, at encontrar uma
declarao break. Em alguns casos, como no exemplo case

"sunny",

pode ser usado para compartilhar algum cdigo entre os cases (ele
recomenda "ir l fora" para ambos os tempos
tenha cuidado: fcil esquecer de um

break,

sunny

e cloudy). Mas

o que far com que o

programa execute cdigo que voc no gostaria de executar.

O comentrio um pedao de texto que parte de um programa mas

completamente ignorado pelo computador. No JavaScript temos
duas maneiras de escrever os comentrios. Para escrever em uma
nica linha de comentrio, voc pode usar dois caracteres barra (

//

e ento o comentrio aps.

var accountBalance = calculateBalance(account);
// It's a green hollow where a river sings
accountBalance.adjust();
// Madly catching white tatters in the grass.
var report = new Report();
// Where the sun on the proud mountain rings:
addToReport(accountBalance, report);
// It's a little valley, foaming like light in a glass.

Capitalizao
Um //

comentrio

vai at o final da linha. Uma seo de texto

Nomes de variveis no podem conter espaos, no entanto muito

entre /* e */ ser ignorado, independentemente se ele contm

til usar mltiplas palavras para descrever claramente o qu a

quebras de linha. Isto geralmente til para adicionar blocos de

varivel representa. Estas so praticamente suas escolhas para

informao sobre um arquivo ou um pedao do programa.

escrever nomes de variveis com vrias palavras:

fuzzylittleturtle
fuzzy_little_turtle
FuzzyLittleTurtle
fuzzyLittleTurtle

O primeiro estilo difcil de ler. Pessoalmente, eu gosto de usar

/*
I first found this number scrawled on the back of one of
my notebooks a few years ago. Since then, it has
occasionally dropped by, showing up in phone numbers and
the serial numbers of products that I bought. It
obviously likes me, so I've decided to keep it.
*/
var theNumber = 11213;

Resumo

sublinhados, embora esse estilo seja um pouco doloroso de escrever.

O padro das funes em JavaScript, e o da maioria dos
programadores JavaScript, seguir o ltimo estilo - eles capitalizam
toda palavra exceto a primeira. No difcil se acostumar com coisas

Voc agora sabe que um programa construdo de declaraes, que

as vezes contm mais declaraes. Declaraes tendem a conter
expresses, que podem ser feitas de pequenas expresses.

pequenas assim, e o cdigo com estilos de nomenclaturas mistas

pode se tornar desagradvel para leitura, ento vamos seguir esta

Colocar declaraes uma aps a outra nos d um programa que

conveno.

executado de cima para baixo. Voc pode causar transtornos no fluxo

de controle usando declaraes condicionais (f, else e switch) e
loops (while, do e for).

As variveis podem ser usadas para arquivar pedaos de dados sob

Voc pode comear com um programa que simplesmente imprime os

um nome, e so teis para rastrear o estado de um programa. O

nmeros de 1 a 7, na qual voc pode derivar algumas modificaes

ambiente um conjunto de variveis que so definidas. O sistema

no exemplo de impresso de nmeros dado no incio do captulo aqui,

JavaScript sempre coloca um nmero padro de variveis teis

onde o loop foi introduzido.

dentro do seu ambiente.

Agora, considere a equivalncia entre nmeros e cadeias em
Funes so valores especiais que encapsulam um pedao do

um hash de caracteres. Voc pode ir de 1 para 2 adicionando 1 (+

programa. Voc pode invoc-las escrevendo function

Voc pode ir de "#" para "##", adicionando um caractere (+

argument2) {}.

Name (argument1,

Essa chamada de funo uma expresso, que pode

= 1).

= "#").

Assim, a soluo pode acompanhar de perto o nmero, de impresso

produzir um valor.

do programa.

Exerccios

FizzBuzz
Escreva um programa que imprima usando console.log() todos os

Se voc est inseguro sobre como testar suas solues para os

nmeros de 1 a 100 com duas excees. Para nmeros divisveis por
exerccios, consulte a introduo.
3, imprima Fizz ao invs do nmero, e para nmeros divisveis por 5
Cada exerccio comea com a descrio de um problema. Leia e

(e no 3), imprima Buzz.

tente resolv-lo. Se voc tiver dificuldades, considere a leitura das

Quando

dicas abaixo do exerccio. As solues completas para os exerccios

imprimir FizzBuzz para nmeros que so divisveis ambos por 3 e 5 (e

no esto inclusas neste livro, mas voc pode procurar elas onlines

continue imprimindo Fizz e Buzz para nmeros divisveis por apenas

em eloquentjavascript.net/code. Se voc quer aprender algo, eu

um deles).

recomendo que veja as solues somente aps ter resolvido o

(Isto na verdade uma pergunta de entrevista usada para eliminar

exerccio, ou pelo menos, depois que tentou por um perodo longo e

uma porcentagem significativa de candidatos programadores. Ento

duro o suficiente para dar uma pequena dor de cabea.

se voc resolv-la, voc est autorizado de se sentir bem consigo

Tringulo com Loop

mesmo).

Escreva um programa que faa sete chamadas a

console.log()

para

retornar o seguinte tringulo:

#
##
###
####
#####
######
#######

Uma maneira interessante para saber o comprimento de uma string

escrevendo .length aps ela.
var abc = "abc";
console.log(abc.length);
// 3

programa

estiver

funcionando,

modifique-o

para

Dica:

Interar sobre os nmeros trabalho claro de um loop, e selecionar o

que imprimir uma questo de execuo condicional. Lembre-se do
truque de usar o operador restante (%) para verificar se um nmero
divisvel por outro nmero (ter zero de resto).
Na primeira verso, existem trs resultados possveis para cada
nmero, ento voc ir criar uma cadeia de if/else

if/else.

Na segunda verso o programa tem uma soluo simples e uma

A maioria dos exerccios contm um pedao de cdigo que pode ser
utilizada para alterar e resolver o exerccio. Lembre-se que voc pode
clicar em um bloco de cdigo para edit-lo.
// Your code here.

Dicas:

inteligente. A maneira mais simples adicionar um outro "ramo" para

um teste preciso da condio dada. Para o mtodo inteligente
construir uma sequncia de caracteres contendo palavra ou palavras
para a sada, que imprima a palavra ou o nmero, caso no haja
palavra, fazendo o uso do operador elegante ||.

Tabuleiro de Xadrez

Escreva um programa que cria uma string que representa uma grade
8x8, usando novas linhas para separar os caracteres. A cada posio
da grade existe um espao ou um caracter "#". Esses caracteres
formam um tabuleiro de xadrez.
Passando esta string para o console.log deve mostrar algo como isto:
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #

Quando voc tiver o programa que gere este padro, defina a

varivel size

e altere programa para que ele funcione para

qualquer size, a sada da grade de largura e altura.

// Your code here.

Dica:

A sequncia pode ser construda iniciando vazia ("") e repetidamente

adicionando caracateres. O caracter para uma nova linha escrito
assim \n.
Utilize console.log para visualizar a sada do seu programa.
Para trabalhar com duas dimenses, voc ir precisar de um loop
dentro de outro loop. Coloque entre chaves os "corpos" dos loops
para se tornar mais fcil de visualizar quando inicia e quando termina.
Tente recuar adequadamente esses "corpos". A ordem dos loops
deve seguir a ordem que usamos para construir a string (linha por
linha, esquerda para direita, cima para baixo). Ento o loop mais
externo manipula as linhas e o loop interno manipula os caracteres
por linha.

Voc vai precisar de duas variveis para acompanhar seu progresso.

Para saber se coloca um espao ou um "#" em uma determinada
posio, voc pode testar se a soma dos dois contadores ainda
divisvel por (% 2).
Encerrando uma linha com um caracter de nova linha acontece aps
a linha de cima ser construda, faa isso aps o loop interno, mas
dentro do loop externo.