Escolar Documentos
Profissional Documentos
Cultura Documentos
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
2014 Eric Douglas
Contedo
Apresentao . . . . . . . . . . . . . . . . . . . .
Motivao para este trabalho . . . . . . . . . .
Bom, se tenho o livro de graa, por que pagar?
Concluso . . . . . . . . . . . . . . . . . . . .
.
.
.
.
1
2
2
3
Livros Modulares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mas o que eu, leitor, ganho com isso? . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
5
Depoimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sobre a Capa . . .
Foguete . . . .
Experimentos .
Terno e Gravata
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
9
9
10
11
Dvidas e Consideraes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
Prefcio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
Ol JavaScript! . . . . . . . . . . . . . . . . .
O que JavaScript? . . . . . . . . . . . . .
Chega de conversa, vamos aprender Java!!!
JavaScript . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
15
15
16
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
17
18
18
19
20
21
21
22
23
23
26
CONTEDO
Operadores e Operaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nmeros Especiais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
27
28
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
30
31
31
32
32
33
33
34
35
37
37
38
38
40
41
41
Expresses JavaScript . . . . . . . . . .
O que uma Expresso . . . . . . . .
Expresses Bsicas . . . . . . . . . .
Expresses de Inicializao . . . . . .
Expresses de Definio . . . . . . .
Expresses para Acessar Propriedades
Expresses de Invocao . . . . . . .
Expresses de Criao . . . . . . . . .
Mais Expresses . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
42
43
43
44
45
46
47
48
49
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Apresentao
Neste livro iremos focar nos tpicos iniciais da linguagem JavaScript, sendo este um guia ideal para
quem est iniciando no desenvolvimento web, e tambm para quem j possui algum conhecimento
mas pretende estudar com base em algum material mais aprofundado e com vrios exerccios
prticos, consolidando assim o que j sabe e aprendendo coisas novas.
Aps cada etapa terica, irei apresentar exemplos e exerccios para fixao de todo o contedo,
e aps uma parte significativa dos estudos, iremos criar projetos para total entendimento prtico
de como aplicar essas informaes. Os exerccios e projetos sero resolvidos e contaro com uma
detalhada explicao, para total entendimento por parte do leitor.
Outro ponto importante que comprometo-me a ser o mais prtico possvel. Sim, teoria timo e
nos d muita base, mas iremos ficar tambm bastante tempo no console testando e aplicando nossos
cdigos.
Para seu aprendizado ser consolidado, e a informao contida neste livro se transformar em seu
conhecimento, extremamente necessrio que voc pratique todos os cdigos aqui presentes, e
continue a leitura apenas quando tiver um entendimento mnimo do que eles esto fazendo.
Em caso de dvidas sobre os temas apresentados, voc pode compartilh-las nos grupos JavaScript
https://www.codeschool.com/courses/discover-devtools
Apresentao
Brasil e impJS. Apenas no deixe dvidas acumularem. Irei tentar lhe ajudar da melhor maneira
possvel!
Alm disso, voc pode ficar por dentro das novidades do blog, novos livros/projetos e muito mais
sobre o universo JavaScript assinando a minha newsletter. Prometo que s ter links e assuntos
teis relacionados ao universo do JavaScript! Nada de spam!
Prximos Temas
NodeJS
Meteor
Express
https://www.facebook.com/groups/javascriptbrasil/
https://www.facebook.com/groups/impJS/
http://eepurl.com/TpAmv
http://ericdouglas.github.io/2014/04/08/10-javascript-furtivo-apresentacao/
Apresentao
AngularJS
MongoDB (e bancos de dados NoSQL)
MEAN
e tambm a combinao Jade e Stylus.
Concluso
O objetivo desta srie ser uma referncia de material de alta qualidade sobre JavaScript, levando
o melhor do mundo terico e prtico para voc.
Os grandes diferenciais so o contedo sintetizado e claro, levando o leitor direto aos pontos chaves
da linguagem, e os diversos exerccios e projetos prticos resolvidos e comentados, que fecham o
ciclo do conhecimento e domnio real dos assuntos abordados.
A fortaleza ntima do homem a sua sinceridade de propsitos. Enquanto rvores
colossais nenhum fruto produzem, outras pequenas rvores cobrem-se de belos pomos.
Livros Modulares
Simples! Os livros sero dividos por reas e paradigmas da linguagem. Este primeiro livro, JavaScript
Furtivo, ir abordar a estrutura (sintaxe) bsica da linguagem e a parte lgica utilizada em suas
expresses/instrues.
Os prximos livros abordaro funes, objetos, arrays e demais assuntos especficos da linguagem,
tendo cada um a devida profundidade no tema.
Porm, para que voc no fique defasado em relao a estes outros assuntos, no final deste livro
estar presente uma lista de recursos para voc continuar por conta prpria estudando estes temas,
a nica diferena que a explicao dos mesmos ficar para futuras publicaes (que sairo em
breve).
Livros Modulares
Depoimentos
Aqui voc pode encontrar algumas opinies dos leitores do blog sobre o contedo deste livro
JavaScript Furtivo!
Show a comunidade precisava de um projeto desses!
Suissa
Curti muito a iniciativa! Sucesso, cara! =D
Leonardo Alberto Souza
T cada dia melhor!!!
Valdiney Frana
Parabns cara perseverana.
Osmar Cs
Ta muito da hora
Depoimentos
Luiz Henrique
Muito Bom! Show!
Falconiere Rodrigues Barbosa
Perfect !
Jonathan Brunno
Muito legal!
Deise DallAgnol
Muito bom!
Robson Bittencourt
Muito bom!
Mrcio Carvalho
timo! Bom saber que existem pessoas escrevendo artigos de JS em portugus
Luis Fontes
Muito bom artigo e bem explicado.
Andr Luiz
Boa Eric. Tenho acompanhado desde a primeira parte e est sendo bem proveitoso pra
mim. Finalmente vou aprender JS, xD.
Euclides Fernandes
Muito bom!
Raphael Fabeni
Estava realmente precisando, bem legal os artigos. parabns!
Jefferson Daniel
Show de bola hein!
Flvio
Depoimentos
Sobre a Capa
A capa do nosso livro no foi criada apenas com fins estticos, mas tem ali representada a sntese de
todo o trabalho e ideologia que ser encontrado neste livro e no projeto em si.
Foguete
Foguete
Voc sabia que um foguete consome mais de 80% do seu combustvel apenas para ser
lanado?
10
Sobre a Capa
Exatamente, um gasto absurdo de energia apenas para tir-lo do cho Mas no sobre foguetes
que quero falar aqui, mas sim sobre dedicao e, principalmente hbito.
Criar um (bom) hbito pode ser perfeitamente comparado com o lanamento de um foguete. No
incio, temos que lutar, nos esforar muito para conseguir apenas sair do cho, mas depois que
conseguimos superar essa barreira inicial, o vo se d de forma fluida.
Antes de tentar aprender sobre qualquer coisa, tenha em mente a certeza que voc s conseguir
obter bons resultados se voc cultivar bons hbitos relacionados a tal tarefa.
Cultive bons hbitos!, e elimine os maus
Experimentos
Experimentos
11
Sobre a Capa
Importante!
No irei passar nenhum exerccio/projeto que exija mais do que tenha sido explicado, pode confiar!
Os exerccios sero exatamente do mesmo nvel do que j tenha sido ensinado. Eventuais dvidas
estaro ligadas mais em relao lgica empregada, e isso algo muito pessoal pois cada um visualiza
o problema de uma forma.
No entanto, no se preocupe com acertar ou no. Se esforce para resolver o problema, pois caso no
consiga obter xito inicial em algum problema, quando voc verificar a resposta, essa ser muito
melhor aproveitada e absorvida do que se voc tivesse a visto sem esforo prvio.
Terno e Gravata
Terno e gravata
Essa ilustrao, por fim, tem o objetivo de nos dizer que, ao trmino destes estudos, estaremos
aptos a ser considerados verdadeiros desenvolvedores JavaScript com um slido conhecimento da
linguagem, e prontos para atuar e contribuir no somente com a comunidade de desenvolvedores,
mas com o mundo todo, criando aplicaes de alto nvel, e implementando ferramentas que iro nos
ajudar no nosso dia a dia!
Dvidas e Consideraes
Caso voc tenha alguma dvida ou considerao a fazer sobre o material aqui apresentado, alm
dos locais mensionados no captulo Apresentao, voc tambm poder utilizar este grupo para se
comunicar comigo e com os demais leitores do livro.
https://groups.google.com/forum/#!forum/javascript-furtivo
Prefcio
Agora que voc est ciente de como ir funcionar essa nova proposta de compartilhamento de
contedo, podemos iniciar nossa jornada rumo maestria no JavaScript.
Neste livro voc ir aprender toda a estrutura (sintaxe) bsica da linguagem e sua estrutura lgica.
Irei te mostrar como nomear suas variveis, como criar dados, como usar os operadores que a
linguagem nos fornece para criar programas de lgica, e no ltimo captulo ser introduzido um
tpico avanado com dicas de otimizao para estes processos.
Fazendo uma comparao com a nossa linguagem falada, iremos aprender como criar palavras,
frases e textos simples, mas de forma eficaz, construindo uma base slida para o aprofundamento
nos temas futuros.
Alm disso, para cada captulo do livro voc ter uma lista de exerccios correspondente, e tambm
a resoluo detalhada de cada exerccio, com explicaes minunciosas, passo a passo, para que voc
possa entender verdadeiramente TUDO que est sendo feito.
E para fechar nosso ciclo de aprendizagem, teremos um projeto que ir englobar todos os assuntos
abordados no livro, para consolidar nosso conhecimento.
Tenha uma tima leitura! Vamos comear =)
Ol JavaScript!
Antes de iniciarmos as apresentaes, vou lhe contar algo que voc dever tomar cuidado ao
compartilhar, pois pode lhe gerar algumas discusses, mas o fato que o mercado nunca foi to
interessante e animador para um programador JavaScript como agora, e nunca foi to onipresente
para qualquer linguagem como est sendo para o JavaScript!
Srio, hoje podemos fazer maravilhas com o JavaScript, desde programao front-end (no lado do
cliente [navegador]), como no back-end com o espetacular Node.JS, que alm disso permitiu que o
JavaScript fosse utilizado em diversas outras reas alm dos navegadores e mundo web.
O trio HTML, CSS e JavaScript est cada vez mais presente nos celulares, seja como aplicaes
hbridas ou at mesmo como o prprio sistema operacional, tendo como exemplo o Firefox OS.
Para mais motivao para aprender JavaScript, veja este link.
http://ericdouglas.github.io/2014/02/17/01-bushido-dev-web/
Ol JavaScript!
15
O que JavaScript?
Vamos fazer uma analogia de uma aplicao web, seja um simples site ou um complexo sistema,
com uma casa.
Na casa, toda a parte estrutural (tijolos, telhado) equivalente ao HTML. Ele responsvel por
estruturar e definir, semanticamente, quais elementos estaro presentes no nosso documento (outro
nome para nossa pgina HTML). muito importante ter em mente exatamente o que cada
tecnologia nos oferece, para aproveitarmos o melhor de cada, e no delegar tarefas de uma para
a outra.
O CSS responsvel de fazer o acabamento da casa, digo, da aplicao. a parte que devemos
estilizar todo o documento, para que o mesmo no fique com cara de apenas um documento para
impresso, mas sim com a cara de uma aplicao/programa o mais agradvel e utilizvel possvel.
OBS: Tanto verdade sobre a questo do HTML ser um documento, que sua origem foi justamente
essa. A WWW (World Wide Web) foi criada com fim de auxiliar pesquisadores a mandarem seus
trabalhos acadmicos uns para os outros. O HTML (HyperText Markup** Language, ou linguagem
de marcao de hipertexto) foi a linguagem criada para identificao do navegador de onde se teria
um ttulo, um pargrafo, uma citao, e por ai vai O que vemos hoje com o HTML5 um sonho
utpico, analisando o cenrio atual com a mentalidade de quando esta tecnologia (HTML) fora
criada.
Por ltimo, e no menos importante, temos o JavaScript! Em relao a uma casa, a funo do
JavaScript seria dar vida a casa, ou seja, seria a luz e a gua da mesma, por exemplo. De forma
menos ldica, de fato o JavaScript cuida das interaes da pgina com o usurio, e vice-versa.
A funo primria para qual o JavaScript foi criada era a de tratar informaes do lado do cliente,
sem que fosse necessrio o envio de informaes para processamento no servidor. Vale mais uma
vez ressaltar a importncia da base histrica para real compreenso e valorizao das tecnologias,
ferramentas que nos auxiliam a realizar determinada tarefa.
Hoje em dia, o acesso a internet se faz em grande parte utilizando servios de banda larga. Bom,
atualmente assim! No incio da nossa querida web, voc poderia levar tranquilamente 1 minuto
apenas para receber uma mensagem que seu formulrio foi preenchido incorretamente
Isso s o comeo, teremos uma longa caminhada para desvendar os segredos dessa linguagem
fantstica que nos permite criar diversas coisas, tantas quanto nossa imaginao permitir!
Ol JavaScript!
16
JavaScript
Nossa linguagem foi criada por Brendan Eich em 1995 quando o mesmo trabalhava na Netscape (hoje
Mozilla). J teve o nome de Mocha e LiveScript, porm quando foi apresentada a implementao de
Java nos navegadores da Netscape em conjunto com a Sun Microsystems (hoje Oracle), teve seu
nome alterado para JavaScript. Este nome, JavaScript, marca registrada da Oracle atualmente.
Quando o JavaScript foi padronizado pelo grupo ECMA (European Computer Manufacters Association), recebeu o nome de ECMAScript, e temos ento essa verso padronizada implementada nos
navegadores.
J na ECMAScript temos que ter ateno atualmente a trs de suas verses. A primeira a verso 3
(ECMAScript 3), que completamente suportada por todos os navegadores atuais. A segunda verso
a 5 (ECMAScript 5) que est em grande parte implementada, mas iremos analisar quando alguma
feature (propriedade, recurso) da mesma no for comum entre os navegadores. A verso 5 a que
iremos abordar principalmente nessa srie. E a prxima verso a 6 (ECMAScript 6), que dever
ser lanada em breve. Preocupe-se hoje com a 3 e 5, a 6 bom, no presente momento, apenas ter
conhecimento de que est para chegar. =)
Mais sobre o incio da JavaScript aqui;
http://pt.wikipedia.org/wiki/JavaScript
Para voc comear estudar a linguagem de programao JavaScript, necessrio que tenha o
entendimento de como se d esse intercmbio dos caracteres que inserimos com a forma que os
mesmos so interpretados pelo computador. Muito difcil? Vamos simplificar!
algo bem simples, voc se comunica com outras pessoas atravs de uma linguagem, a qual nada
mais que uma padronizao de sequncias de letras e fonemas que juntos referem-se a alguma
coisa e do sentido a tal. Na rea da programao exatamente a mesma coisa! Temos que conhecer
as estruturas bsicas da linguagem para comearmos a montar palavras, frases e textos, que no nosso
caso sero os programas.
Essa estrutura de comunicao bsica, ou estrutura lxica, nos indica como a linguagem deve ser
escrita, sendo essa estrutura o nvel mais baixo de abstrao, nos indicando como criar e nomear
variveis, como inserir comentrios nos cdigos e como escrever as expresses e instrues que
faro toda a mgica acontecer.
Agora que j temos em mente o que precisamos aprender, vamos, ento, aprender!
Nesse captulo voc ir aprender:
1. Qual o padro de escrita usado no JavaScript;
2. Detalhes de nomenclatura;
18
Leia sempre com bastante ateno cada tema passado e reflita-o um pouco para iniciar a
absoro das informaes. Todo o contedo deste livro de suma importncia para seu
aprendizado e crescimento como desenvolvedor JavaScript, porm, no pense que voc
ter que aprender tudo na primeira vez que ler e/ou praticar.
O aprendizado algo que leva tempo e muito esforo repetitivo, e muitas coisas no so
triviais, e isso que no final far toda a diferena e dar a sua satisfao em ter vencido
cada etapa do processo. =)
2
3
4
Nesse cdigo acima, quando testado no Devtools do Chrome, por exemplo, ter como resultado os
valores na frente da seta ->.
Veremos como comentar nosso cdigo agora.
19
Voltando para os comentrios, as duas formas que temos de inseri-los nos nossos cdigos so:
Usando duas barras: //
Usando /* */
Vamos ver um exemplo:
20
6
7
O termo do ttulo dessa seo, rodinhas, se refere s rodinhas quando estamos aprendendo
a andar de bicicleta. No incio, so super importantes, mas depois que aprendemos a andar,
no precisamos mais delas. Usaremos comentrios nos nossos cdigos para fins didticos,
mas os mesmos devem ser usados de forma muito escassa, pois de fato no so necessrios.
Se voc precisa explicar muito detalhadamente alguma parte do seu cdigo, porque
algo ali no est muito correto
Provrbio Chins
// cdigo vlido
var
vazio =
Tome cuidado com as quebras de linhas, pois como veremos no fim deste captulo, em
determinadas situaes, o seu cdigo pode ter um ponto e vrgula (;) adicionado pela
prpria linguagem, para preveno de erros, porm que de fato ir gerar outros inesperados
(mas que agora so esperados pois eu te falei que vo acontecer =P).
Para que isso no acontea, tome cuidado com as quebras de linhas e com a omisso do
ponto e vrgula. Por favor, seja caprichoso com seu cdigo, no porque voc pode fazer
algo que voc deve fazer.
21
Cartrio JavaScript
Sim, aqui iremos falar da parte mais pesada desse captulo, que foi bem leve, ento de fato essa a
parte menos leve. Qual parte essa? Na verdade so duas: identificadores e palavras reservadas.
Identificadores
Um identificador nada mais do que um nome que usamos para chamar nossas variveis e funes.
Sim, iremos registrar o seu nome na certido, ou no programa como queira, para que futuramente
quando esses meninos e meninas crescerem ainda nos lembremos deles e eles de ns.
Temos apenas algumas restries para criar nossos identificadores, que so elas:
Um identificador deve comear com alguma letra, $ ou _ (underscore);
Nmeros s so permitidos aps o primeiro caractere estar de acordo com a regra anterior.
Exemplos de nomes vlidos: carro, _teste, v8, $nomeValido.
Palavras Reservadas
Essas palavras so as que j esto definidas na linguagem, portanto apenas as usaremos. Confira
abaixo algumas destas palavras:
1
2
3
4
5
6
7
8
9
10
11
12
break
case catch continue
debugger default delete do
else
finally for function
if in instanceof
new
return
switch
this throw try typeof
var void
while with
22
Na ECMAScript 5 temos mais palavras reservadas para uso futuro em novas implementaes do
padro, que so:
1
2
3
4
class
enum export extends
import
super
No strict mode (modo estrito da linguagem, veremos futuramente do que se trata), temos mais
algumas palavras reservadas para futuras implementaes
1
2
3
4
5
implements interface
let
package private protected public
static
yield
Concluso
Neste captulo ns aprendemos:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
O ttulo deste captulo uma representao dos trs assuntos que iremos aprender: Valores, Tipos
e Operadores.
Na primeira parte, iremos ver sobre:
1.
2.
3.
4.
5.
Tipos de Dados
Tipo Number
Operadores Matemticos
Nmeros Especiais
Strings
Tipos de Dados
O que fazemos programando computadores basicamente manipular dados. No JavaScript, chamamos esses dados de valores. Estes valores so divididos em dois tipos:
24
Tipos Primitivos
number (nmeros)
string (sequncia de caracteres/texto)
boolean (booleanos ou valores de verdade)
Tipos Especiais: null (nulo) e undefined (indefinido)
Todos os valores em JavaScript diferentes dos citados acima, so pertencentes ao tipo object (objeto).
Vejamos quais so eles:
Tipos de Objetos
arrays (vetores)
funes
Date (data)
RegExp (expresses regulares)
Error
Bom, agora que vimos teoricamente os tipos de dados em JavaScript, vamos perceber tudo isso de
forma real. Para isso, voc dever abrir o console do seu navegador (no Google Chrome voc pode
usar o atalho ctrl shift j.
Dentro da seo console existente nas ferramentas do desenvolvedor, voc dever digitar os
comandos abaixo, para perceber que tudo isso que te falei ali em cima verdade. O resultado
esperado est indicado na frente da seta ->. Caso o resultado no seja o que voc conseguiu,
certifique-se de ter digitado corretamente o cdigo.
Ah, j ia me esquecendo Digite TODO o cdigo, no copie apenas!!! Isso ser muito importante
para a memorizao e internalizao dos conceitos.
ps: No acredite em meus resultados, faa todos os testes! =)
Quando estamos dentro do console, a utilizao do comando console.log() desnecessria para visualizar o resultado de uma instruo, pois o resultado da operao sempre
retornado.
Vamos utilizar o console diretamente apenas para cdigos curtos, pois para cdigos maiores,
iremos rod-los atravs de nossa pgina html, e ai o comando console.log() ser de
grande utilidade.
25
8
9
10
11
12
13
14
15
16
Olhando o cdigo acima, mais precisamente na parte de tipos primitivos especiais, voc pode
perceber que o tipo null na verdade um object. Bom, mas por que isso?
Essa peculiaridade do JavaScript na verdade um erro dos primridios da linguagem que foi
herdado pela ECMAScript. Teremos um tpico especfico mais a frente para explicar essa questo.
Vamos ver agora no nosso console os tipos existentes de objetos.
1
/* Tipos de Objeto */
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
26
Muito bom! Agora j conhecemos todos os tipos de dados do JavaScript! Voc pode parar um pouco
para respirar e beber uma gua, pois a partir de agora iremos aprofundar um pouco em cada tipo
primitivo de dados que acabamos de ver. Os tipos de objetos so mais complexos, e por isso cada um
ter um livro prprio (no mnimo)
Number
Representamos nmeros no JavaScript da mesma forma que escrevemos no nosso dia a dia. var
numero = 13 a forma que dizemos no JavaScript que a varivel numero receceu o valor 13.
Nmeros fracionrios so representados com um ponto, ficando assim a representao: var numero
= 1.3.
Quando tivermos trabalhando com um nmero muito grande ou muito pequeno, usamos notao
cientfica atravs da letra e, ficando nosso cdigo, no caso, assim: 1.313e13 que igual a 1.313 x
10.
Clculos com nmeros inteiros menores que 9 quadrilhes so garantidos de sempre serem precisos,
porm no se pode dizer o mesmo para nmeros fracionrios, que devem ser tratados como
aproximaes.
Operadores e Operaes
Agora que conhecemos um pouco mais sobre os nmeros no JavaScript, vamos aprender a utilizar
alguns operadores para ento fazer alguns clculos com estes nmeros.
Temos os 4 operadores matemticos bsicos representados no JavaScript da seguinte forma:
Agora que j conhecemos os nmeros e operadores, vamos brincar um pouco no console. Digite as
operaes abaixo e confira se o resultado o mesmo do indicado no comentrio.
27
2
3
4
5
1.3 * 10 // -> 13
6
7
13 / 2 // -> 6.5
8
9
13 % 2 // -> 1
Nmeros Especiais
Temos trs tipos de nmeros que no se comportam como nmeros. Infinity, -Infinity e NaN.
Os dois primeiros so gerados quando tentamos dividir algum nmero por zero, e o outro, Not a
Number (NaN), surge quando h uma coero de tipo de string para number, no caso, mal sucedida,
pois a string no pode ser convertida em um nmero de fato.
Vamos ver como surgem estes nmeros! De volta ao console! =)
1
2
3
4
5
6
13 / 0 // -> Infinity
7
8
ps: Uma particularidade do NaN que ele o nico valor em JavaScript que no igual a ele mesmo.
Como verificar isso? A melhor forma para saber se uma varivel est com valor NaN testando se
ela igual a ela mesmo (ou diferente).
Se voc comparar a varivel A com ela mesmo e o resultado for false, logo, A igual a NaN. Vamos
dar uma olhada mais de perto:
1
var A = NaN;
2
3
4
A == A; // -> false
A != A; // -> true
Voc poderia tambm verificar se uma varivel est com o valor NaN usando o mtodo isNaN(),
porm o mesmo apresenta alguns comportamentos inesperados por fazer coero dos valores para
o tipo number. Veja mais aqui.
https://gist.github.com/kitcambridge/1086528
28
Strings
Este o tipo de dados bsico usado para representao de texto. Para o programa identificar uma
string, tal deve estar contida entre aspas duplas ou simples, assim:
"isso uma string" e
'isso tambm uma string'
ps: Geralmente, usamos aspas simples no JavaScript e aspas duplas no HTML.
Voc pode colocar tudo dentro de uma string, mas alguns caracteres precisam ser colocados com
uma certa ateno, como aspas, quebras de linha, tabulao entre outros, e toda a string deve ser
escrita como uma simples expresso, apesar de poder ser escrita em vrias linhas de cdigo, como
ser demonstrado logo mais.
Para fazer o escape dos caracteres especiais, utilizamos o smbolo da barra invertida \. Esse sinal nos
diz que temos algum caractere com significado especial na frase.
Vamos praticar um pouco essa teoria das cordas.
1
2
3
4
5
6
var
frase01
frase02
frase03
frase04
texto =
7
8
9
10
11
12
13
texto;
/*
-> "Este o pargrafo inicial...... complementado por este trecho.
A partir daqui comea a ficar interessante...
agora com tabulao, e 'aspas' tamb\
m"
*/
14
15
16
17
18
19
20
21
22
texto2;
29
ps:O caracter \ quando colocado no fim da linha, permite que voc continue a string de outra linha.
Isso til para formatao do cdigo, melhorando a sua legibilidade. Use a forma que for mais
conveniente e agradvel para voc.
Vamos encerrar esta primeira etapa por aqui, para que no fique muita informao de uma s vez.
No prximo captulo iremos ver mais sobre operadores, booleanos, coero de tipo e mais algumas
coisas.
Continuando o ltimo captulo onde falavamos sobre valores, tipos e operadores, veja o que ser
visto neste captulo logo abaixo:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Valores Booleanos
Valores Truthy e Falsy
Truques com o Operador !
Cuidado com a Falsidade!
Valores undefined
Operadores Unrios
Operadores de Incremento
Operadores de Comparao
Coero (ou converso) de Tipo
Como Evitar a Coero de Tipo
Operadores Lgicos
Curiosidades sobre os Operadores Lgicos
Operador Ternrio
Regras de Precedncia
31
Valores Booleanos
Esse tipo de dado, boolean, bem especfico, tendo apenas dois valores possveis, true ou false
(verdadeiro ou falso). Conseguimos obter estes valores atravs de operaes de comparao (x
maior que y ? A resposta sempre sim ou no, verdadeiro ou falso no caso) e atravs de um truque
utilizando o operador unrio ! (mais sobre operadores unrios e comparaes adiante).
Este operador ! (negao) inverte o valor passado ele para um valor booleano oposto ao original.
Vou explicar melhor, acompanhe comigo:
Quando aplicamos o operador ! uma varivel que tenha realmente um valor considervel,
obtemos o valor false como retorno desta operao. Mas para ficar mais claro o que um valor
considervel, vou te explicar o que um valor descartvel.
Todos os tipos de valores em JavaScript tm, intrnsicamente (em sua essncia), um respectivo valor
booleano associado. Estes valores so claramente perceptveis quando fazemos comparaes entre
valores e quando utilizamos o operador unrio de negao !.
Valores falsy (falsos) so os que tem em sua essncia o valor booleano false. Estes valores so:
false
0 (zero)
"" (string vazia)
null
undefined
NaN
Todos os outros valores em JavaScript so considerados truthy (verdadeiros). Alguns valores truthy
peculiares so:
32
!false
//
!0
//
!""
//
!NaN
//
!"0"
//
!"false"
//
!function() {} //
!{}
//
->
->
->
->
->
->
->
->
true
true
true
true
false
false
false
false
Um modo interessante de saber qual o valor truthy ou falsy de um valor negando-o duas vezes
com o operador !. Sim, como na Matemtica, -1 x -1 = 1. Ento temos que:
1
2
3
4
!!false
!!NaN
!!{}
!!function() {}
//
//
//
//
->
->
->
->
false
false
true
true
false, 0 e ""
Quando comparamos dois destes trs valores utilizando o operador ==, o resultado sempre true.
Vamos testar no console o cdigo abaixo:
OBS: Quando utilizamos o console, podemos omitir o sinal ; (ponto e vrgula) no fim das
expresses, pois estamos fazendo apenas um teste rpido, porm no seu cdigo JavaScript
de fato, sempre utilize o ponto e vrgula!!!
33
null e undefined
Os valores null e undefined somente so equivalentes a eles mesmos. Vejamos:
1
2
3
4
5
null == false
null == null
undefined == false
undefined == undefined
undefined == null
//
//
//
//
//
->
->
->
->
->
false
true
false
true
true
O ltimo valor falsy que temos para citar o NaN, porm este j foi abordado no captulo anterior, e
sabemos que o nico tipo de dado em JavaScript que no igual a ele mesmo.
Valores Undefined
Temos definidos no JavaScript dois tipos indefinidos, usados para representar a falta de representatividade de algum dado.
ps: O paradoxo da frase anterior apenas uma brincadeira, pois a definio muito simples, e vou
lhe explicar agora! =)
Como j foi explicado no captulo anterior, na realidade apenas undefined de fato um tipo primitivo
de dado, null um tipo de objeto, quando fazemos sua inspeo no console podemos verificar isso.
O valor undefined aparece quando declaramos uma varivel e no atribumos a ela nenhum valor.
J o valor null um valor que deve ser atribudo a uma varivel, e representa a ausncia de valor
nesta varivel.
Confira os exemplos no captulo anterior na seo tipos de dados para fixar esta diferena.
Operadores Unrios
Alguns operadores so palavras ao invs de smbolos. Utilizamos um destes operadores muito nos
exemplos do captulo anterior, o operador typeof, que produz uma string identificando o tipo do
valor do elemento que voc passou a ele.
ps: Para ver o operador typeof em funcionamento, volte no captulo anterior onde voc encontrar
vrios exemplos da utilizao dele.
34
Outros operadores unrios so delete e void. Para este material no se tornar muito extenso, voc
pode procurar o que cada um faz aqui(delete) e aqui(void).
Operadores unrios utilizam um valor para fazer seu trabalho, operadores binrios e
ternrios, dois e trs valores respectivamente.
Operadores de Incremento
Temos dois tipos de operadores de incremento: os utilizados para nmeros e os utilizados para strings
e nmeros.
Incrementando Nmeros
Os operadores ++ e -- so utilizados para incrementar variveis/valores do tipo number. So
operadores frequentemente utilizados para auxiliar na estrutura lgica do programa, aumentando
ou diminuindo em uma unidade o valor da varivel. A partir do prximo captulo iremos comear
a focar em pedaos de cdigo maiores, e assim iniciar a criao de mini-programas, para depois
chegarmos no nosso objeto de juntar todas essas peas para criarmos o que quisermos. Por agora,
vamos ver no console como funcionam estes operadores.
Uma ltima informao. Estes operadores podem ser utilizados antes ou depois da varivel, sendo
assim denominados operadores de pr-incremento ou ps-incremento. Qual a diferena entre
eles? A diferena que quando utilizamos o operador antes da varivel, ela ser alterada antes da
execuo do cdigo, ento o valor processado para a operao atual ser o j modificado, e quando
usamos o operador depois da varivel, essa alterao ser percebida apenas depois quando esta
varivel for solicitada.
Vamos aos testes!
1
2
3
4
5
6
7
var total = 0;
total++ // -> 0 (valor foi alterado, mas ser percebido na prxima operao)
total
// -> 1
++total // -> 2
--total // -> 1
total-- // -> 1
total
// -> 0
https://developer.mozilla.org/pt-BR/docs/JavaScript/Guide/Expressions_and_Operators#delete
https://developer.mozilla.org/pt-BR/docs/JavaScript/Guide/Expressions_and_Operators#void
35
// somando nmeros
var resultado = 7
resultado += 6 // -> 13
4
5
6
7
// concatenando strings
var meuNome = 'Eric'
meuNome += ' Douglas' // -> "Eric Douglas"
8
9
10
// subtraindo nmeros
resultado -= 6 // -> 7
11
12
13
// multiplicando nmeros
resultado *= 3 // -> 21
14
15
16
// dividindo nmeros
resultado /= 2 // -> 10.5
17
18
19
20
21
22
23
Operadores de Comparao
Operadores de comparao so um dos tipos de operadores binrios, que no caso, utilizam dois
valores para efetuarem a operao. Os operadores de comparao sempre retornam um booleano,
dizendo se a comparao verdadeira ou falsa. So tambm utilizados na estrutura lgica do
programa.
Vamos conhecer estes operadores!
36
< : menor que - verifica se o nmero da esquerda menor que o nmero/string da direita <= : menor
ou igual que - verifica se o nmero da esquerda menor ou igual ao nmero/string da direita > :
maior que - verifica se o nmero da esquerda maior que o nmero/string da direita >= : maior ou
2
3
4
5
6
var treze = 13
treze <= 13 // -> true
7
8
9
Comparadores de Igualdade
Alm dos comparadores mostrados acima, tambm temos os comparadores de igualdade, que so
constantemente usados em nossos cdigos, porm tem algumas peculiaridades que se voc no
souber, certamente ir gerar erros nos seus programas. Mas fique tranquilo, bem simples de
entender a diferena entre eles, e irei lhe provar agora! Primeiro, vamos conhecer quais so estes
outros operadores.
==: testa igualdade !=: testa desigualdade ===: testa igualdade de forma restrita !==: testa desigual-
37
3
4
5
Vale ressaltar mais uma vez Entender o que est acontecendo no cdigo super
importante, e muitas vezes temos que realmente ler vrias vezes e/ou ficar vrios minutos
para conseguir entend-lo. E sim, isso algo super importante, no tenha d de investir
tempo nisso!
Neste prximo tpico irei lhe explicar o que aconteceu no cdigo anterior, ento, vamos para o
prximo!
Coero de Tipos
O nome assusta um pouco n?! E de fato devemos ter cuidado com isso pois surgem muitas bugs no
seu cdigo a partir deste esforo que o JavaScript faz para efetuar todas as instrues recebidas.
Sempre que voc usa um operador no JavaScript (no caso ento, faz uma operao), voc ir receber
um valor de retorno, nunca um erro, mesmo que voc tente trabalhar com tipos diferentes de dados.
A coero de tipos (ou converso de tipos) justamente isso! Quando tentamos fazer operaes
com tipos de dados diferentes, o JavaScript nos agracia com a converso de um dos valores para
algum outro tipo S que o grande e terrvel problema disso que dificilmente voc consegue prever
qual ser este novo valor, pois as regras para tal converso no so intuitivas, o que pode causar
alguma(s) falha(s) em sua aplicao.
38
Operadores Lgicos
Sempre que pensamos na parte lgica do programa devemos pensar em valores booleanos, e para
gerar estes valores booleanos a partir dos valores que nossas variveis carregam, iremos usar os
operadores lgicos, que so um tipo de operador binrio, ou seja, necessitam de dois valores para
gerao de um terceiro.
ps: O operador ! um operador lgico pois retorna um valor booleano, porm uma exceo a regra
por ser um operador unrio.
Conhea agora os operadores lgicos:
&& : este operador chamado de E lgico
|| : este operador chamado de OU lgico
! : este operador chamado de NO lgico
&& E lgico
Este operador lgico e binrio retorna true se ambos os valores (ou operandos) forem verdadeiros.
Isso no caso ser utilizado em estruturas condicionais, assunto que iremos abordar no prximo
captulo. Por enquanto voc s precisa saber disso.
|| OU lgico
Este operador lgico e binrio retorna true se um dos valores forem verdadeiros.
! NO lgico
Como j vimos anteriormente, este operador transforma o operando em booleano, porm com a
peculiaridade de inverter seu valor truthy/falsy para um booleano de fato.
Entendendo o Operador ||
O operador || retorna o valor da sua esquerda quando ele pode ser convertido para true, ou seja,
quando seu valor do tipo truthy, e sempre retorna o valor da direita caso contrrio, independente
de qual valor seja esse, at mesmo outro valor falsy. Veja isso na prtica.
39
3
4
5
6
7
var direita = 0 // -> agora vamos atribuir este valor falsy na direita e ver o qu\
e acontece
8
9
10
11
12
13
14
esquerda = 13
direita = 31
15
16
Viram? Mesmo o valor da direita sendo falsy, ele retornado pois a regra : se o valor da esquerda
for falsy, retorne o da direita sem nem ver qual . E depois, quando alteramos o valor da esquerda
para um valor truthy, ele foi retornado. Legal n?! =)
Vamos ver agora o outro operador.
3
4
5
6
7
var esquerda = 31 // agora vamos atribuir um valor truthy na esquerda e ver o que\
acontece
8
9
10
11
12
13
direita = ''
14
15
40
Muito bom! Estamos quase terminando, e a essa altura voc j sabe de vrias peculiaridades do
JavaScript! Vamos em frente =)
Operador Ternrio
Este operador de fato muito poderoso, pois evita verbosidade no cdigo, deixando-o ento bem
mais elegante.
Ele chamado operador ternrio pois envolve trs peas em sua operao. Vamos analis-lo abaixo.
Primeiramente irei mostr-lo em funcionamento e depois irei explic-lo.
1
2
3
4
5
6
7
8
9
10
41
Regras de Precedncia
Para saber qual operao ir ocorrer primeiro, voc precisa conhecer a ordem de precedncia dos
operadores. Confira abaixo a lista na ordem do maior (no topo) para o menor (embaixo) operador
em relao a sua precedncia.
Concluso
Finalmente terminamos! Bom, esse foi o maior captulo at agora, e com certeza foi o mais
interessante, por termos visto vrias peculiaridades da linguagem JavaScript e termos sedimentado
uma base slida para os captulos seguintes.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
Expresses JavaScript
Vamos continuar com nossa longa jornada, rumo maestria em JavaScript! Neste captulo falaremos
exclusivamente sobre expresses. Confira um resumo do que ser abordado:
1. O que uma Expresso?
2. Expresses Bsicas
3. Expresses Complexas
Expresses de Inicializao
Expresses de Definio
Expresses para Acessar Propriedades
Expresses de Invocao
Expresses de Criao
4. Mais Expresses
Expresses Matemticas
Expresses de Relao
Expresses Lgicas
Expresses de Atribuio
Expresses JavaScript
43
Expresses Bsicas
Esse tipo de expresses so assim denominadas pois no incluem outras expresses, ou seja, so o
menor fragmento possvel do nosso cdigo. Vejamos alguns exemplos:
1
2
3
// Expresses Literais
13
"JavaScript Furtivo"
4
5
6
7
8
9
10
11
12
// Referncias variveis
total
i
44
Expresses JavaScript
Expresses de Inicializao
Essas expresses so muito importantes, pois nos possibilitam a criao de objetos e arrays de forma
literal, e isso nos d uma facilidade e praticidade muito grande na hora de tais tarefas. Veja abaixo
a forma de se criar um objeto e array de forma literal e da forma utilizada com o auxlios de seus
construtores (iremos conhecer mais sobre construtores futuramente).
1
2
3
4
5
6
7
*/
8
9
10
11
Viram o quo econmica e elegante a forma literal de inicializao de objetos e arrays? Use-a sem
moderao!
Um dos motivos de enquadrarmos esta e as expresses seguintes no campo de expresses complexas,
que elas podem receber as expresses bsicas para comporem seu valor, pois obviamente, um
objeto, um array, s so teis por carregarem em si valores agrupados de acordo com algum
propsito. Alm de valores bsicos, podemos tambm passar valores complexos para expresses
complexas. Traduzindo, ter arrays dentro de arrays, objetos dentro de objetos, arrays dentro de
objetos, objetos dentro de arrays, e por ai vai
Vamos agora ento, dar sentido a existncia de nossos objetos e arrays!
1
2
3
4
5
6
7
8
9
var estudos = {
JavaScript: [
'NodeJS',
'AngularJS',
'ExpressJS',
'MongoDB'
],
Outros: [ 'Jade', 'Stylus' ]
};
10
11
12
var livros = [
'Padres JavaScript',
Expresses JavaScript
13
14
15
45
No exemplo acima, na varivel estudos (que um objeto, veja pelo sinal {} que abraa os demais
valores), temos as propriedades JavaScript e Outros recebendo arrays como valores, e estes arrays
recebem strings, por sua vez.
No caso da varivel livros, que um array [], ela recebe trs strings como itens de sua lista de
valores.
Brinque um pouco agora criando arrays e objetos de diferentes tipos, preenchidos com diversos
valores!
Expresses de Definio
Usamos essa expresso para definir uma funo em nosso programa. Para criarmos essa expresso
devemos seguir os seguintes passos:
1. Usar a palavra chave function
2. [opcional] Dar um nome para a funo (caso no tenha nome, iremos cham-la de funo
annima)
3. Passar os argumentos que sero usados na funo, que podem ser de 0 (zero) at quantos
voc quiser, todos colocados dentro dos parnteses () e separados por vrgulas. Ex: (valor1,
valor2, valor3)
4. Criao do corpo da funo, que conter outras expresses, que so as tarefas que devero ser
feitas todas as vezes que a funo for chamada. O corpo da funo delimitado por chaves {
... mais expresses aqui ... }
Para chamarmos nossa funo posteriormente, devemos ou atribu-la a uma varivel ou ento
nome-la.
Veja alguns exemplos:
1
2
3
function nomeada() {
// outras expresses aqui
}
4
5
6
7
Expresses JavaScript
46
Essa forma utilizada exclusivamente para acessar propriedades e mtodos de objetos. Onde temos
escrito expresso, iremos utilizar o nome do nosso objeto, e onde temos chave, iremos passar o nome
da propriedade/mtodo que queremos avaliar. Vamos para o console e tornar isso mais claro.
1
2
3
4
5
6
var guitarras = {
modelo1: 'music man',
modelo2: 'ibanez',
modelo3: 'prs',
cordas: [ 'elixir', 'daddario' ]
};
7
8
9
10
11
12
Notem que tivemos um erro ao tentar acessar o segundo item da propriedade cordas! Isso se deve
pelo motivo que para acessar itens de arrays, utilizamos outro tipo de notao, que irei lhe explicar
agora!
Com esse tipo de notao podemos acessar tanto os itens de um array quanto as propriedades de um
objeto. Onde temos o valor expresso iremos substituir pelo nome do array ou objeto, e onde temos
chave, iremos substituir pela posio do item (caso seja um array) ou pelo nome da propriedade,
caso seja um objeto. Vamos agora utilizar do nosso exemplo anterior, porm acessando o objeto e o
array com esta notao por colchetes.
Expresses JavaScript
1
2
3
4
5
6
47
var guitarras = {
modelo1: 'music man',
modelo2: 'ibanez',
modelo3: 'prs',
cordas: [ 'elixir', 'daddario' ]
};
7
8
9
10
11
12
13
14
15
16
17
Dicas de Acessibilidade
Caso voc tente acessar propriedades em null e undefined, voc obter uma exceo
TypeError, ou seja, um erro, pois esses valores no podem ter propriedades.
Caso acesse uma propriedade ou ndice que no esteja definido, o valor retornado ser
undefined.
A notao de ponto, por ser mais direta, deve ser utilizada quando j se sabe exatamente qual
propriedade ser acessada.
A notao por colchetes permite que seja passado variveis como valor para acesso, pois caso
a propriedade tenha sua chave (identificador) sendo um nmero, contendo espao no nome
ou sendo uma palavra reservada de JavaScript, a nica forma de acess-la assim, atravs da
notao de colchetes, utilizando ou no uma varivel para conteno desse valor.
Expresses de Invocao
Essa expresso utilizada para chamar (invocar, executar) uma funo ou mtodo.
Quando uma funo est atribuda uma chave em um objeto, essa passa a se chamar
mtodo.
Para usar essa expresso devemos indicar o nome da funo que desejamos invocar seguida de
parnteses. Caso a funo receba argumentos, os mesmos devem ser passados dentro dos parnteses.
Expresses JavaScript
48
ps: Lembre-se de usar no seu cdigo o ; depois de chamar a funo! Somente omitiremos o ponto e
vrgula no console para agilizar os testes.
Vamos ver um exemplo:
1
2
3
4
5
6
7
8
Expresses de Criao
So utilizadas como uma alternativa na forma de se criar objetos. bom ter conhecimento dessas
expresses, mas saiba que dificilmente voc ir utiliz-las (para arrays e objetos), pois a forma literal
bem mais direta.
Nessas expresses utilizamos as funes construtoras para criar novos objetos, juntamente com a
palavra chave new (iremos estudar sobre funes construtoras mais a frente).
Alguns exemplos da utilizao dessas expresses:
1
2
3
Expresses JavaScript
49
Mais Expresses
No ltimo captulo j vimos vrios exemplos de expresses que utilizam operadores. Irei deixar aqui
indicado o nome da expresso com seus respectivos operadores, e aps vista a teoria aqui, v para o
outro captulo e procure as respectivas expresses em uso.
Os outros tipos de expresses que temos so: