JavaScript Furtivo

Iniciando no mundo do desenvolvimento JavaScript!

Eric Douglas
Esse livro est venda em http://leanpub.com/javascriptfurtivo
Essa verso foi publicada em 2014-05-07
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Motivao para este trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Bom, se tenho o livro de graa, por que pagar? . . . . . . . . . . . . . . . . . . . . . . . . 2
Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Livros Modulares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Mas o que eu, leitor, ganho com isso? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Depoimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Sobre a Capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Foguete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Experimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Terno e Gravata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Dvidas e Consideraes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Prefcio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Ol JavaScript! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
O que JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Chega de conversa, vamos aprender Java!!! . . . . . . . . . . . . . . . . . . . . . . . . . . 15
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Conhecendo o Idioma JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
As Letras do Nosso Alfabeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
JavaScript no JAVASCRIPT nem javascript! . . . . . . . . . . . . . . . . . . . . . . . . . 18
Rodinhas, digo, Comentrios no Cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Como Escrever Meu Cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Sempre use Ponto e Vrgula ; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Cartrio JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
O Valor dos Tipos de Operadores - Parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Tipos de Dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
CONTEDO
Operadores e Operaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Nmeros Especiais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
O Valor dos Tipos de Operadores - Parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Valores Booleanos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Valores Truthy e Falsy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Truques com o Operador ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Cuidado com a Falsidade! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Valores Undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Operadores Unrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Operadores de Incremento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Operadores de Comparao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Coero de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Como Evitar a Coero de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Operadores Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Curiosidades sobre os Operadores Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Operador Ternrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Regras de Precedncia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Expresses JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
O que uma Expresso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Expresses Bsicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Expresses de Inicializao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Expresses de Definio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Expresses para Acessar Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Expresses de Invocao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Expresses de Criao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Mais Expresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 2
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!
Motivao para este trabalho
Tenho uma enorme satisfao em poder compartilhar conhecimento, e fao isso de forma mais
empenhada ainda quando se trata de JavaScript!
Sendo assim, para que este conhecimento no fique restrito apenas para quem pode pagar, mas esteja
disponvel para todos que, de fato, queiram aprender, decidi criar este material e disponibiliz-lo de
forma gratuita no meu blog.
Realmente um prazer imenso poder fazer parte desta comunidade de desenvolvedores, e esse livro
(e os prximos) sero uma pequena retribuio, um agradecimento a tudo o que j aprendi atravs
dela.
Bom, se tenho o livro de graa, por que pagar?
fato que o trabalho de se escrever um livro consome muito tempo e exige uma grande dedicao.
A compilao deste trabalho em formato de livro tem como objetivo experimentar uma nova forma
de compartilhar conhecimento, onde irei presente-lo com o melhor contedo que me for possvel
criar, e caso voc fique satisfeito com este, voc tambm poder me presentar com sua colaborao.
Alm dessa forma de negociarmos atravs de presentes, estou iniciando uma metodologia prpria
de diviso do contedo a ser ensinado de forma modular. Irei te explicar melhor isso no pximo
captulo.
Tendo este formato obtido xito, j tenho em mente outros temas para novas sries furtivas. Se voc
est curioso em saber quais so estes possveis temas, irei lhe contar.
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 3
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
Continuando as inovaes na forma de se apresentar contedo tcnico, irei implementar um sistema
onde o leitor poder montar o seu prprio livro, de acordo com sua vontade/necessidade.
Como assim? Ainda no entendi!
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 5
Mas o que eu, leitor, ganho com isso?
Liberdade!!!
Acompanhe comigo a seguite situao:
Imagine uma pessoa que j temexperincia comdesenvolvimento JavaScript, estudou seus princpios
bsicos e tem um bom entendimento do paradigma orientado a objetos, mas tem muita vontade de
aprender mais sobre programao funcional, e gostou do contedo apresentado nesta srie, atravs
do meu blog, e gostaria de adquirir o livro para poder estudar atravs dos exerccios e projetos.
Imaginou isso? Legal! Agora vamos continuar, se ele j sabe a maior parte e quer apenas aprofundar
em funes, se o material for disponibilizado de forma nica, ele ter que pagar por todo o livro,
porm, se o mesmo estiver modularizado (dividido), ele poder adquirir apenas a parte que lhe
interessa. Justo!
Ento, com essa viso que inicio essa nova maneira de dispor contedo, permitindo que o mesmo
seja adquirido de forma independente.
Outro ponto importante nessa abordagem que assim teremos mais liberdade para aprofundar em
cada tema em especfico, elevando e muito nosso conhecimento e domino nos temas.
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 7
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 8
Post muito bom Eric parabns cara!!
Rafael Antonio Lucio
Parabns Eric!
gustavoSRodrigues
Muito bom! parabns mesmo Xar rs
Erick
Isso ai Eric! Episdios de alta qualidade parabns pelo timo trabalho!!
Guilherme Decampo
Sou f desse Eric
Palmer
Muito obrigado. Como sempre, excelentes contedos. Abrao.
Denis Toledo
Nice post man! +1
Caio Ribeiro Pereira
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?
Sobre a Capa 10
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
Nosso livro estar recheado de exemplos, exerccios e projetos.
Usaremos os exemplos para explicar trechos curtos da teoria, atravs de pequenos cdigos
que tem o papel de deixar visual e mais palpvel este primeiro contato com um determinado
assunto.
Os exerccios estaro contidos no fim dos captulos, e tem o objetivo de verificar se voc
realmente aprendeu os assuntos em questo. Vale ressaltar que alm dos exerccios, no fim do
livro estaro todas as resolues dos mesmos, para auxili-lo quando necessrio, e tambm
a explicao detalhada de como o exerccio foi resolvido.
ps: Olhe a resoluo somente aps tentar resolver os exerccios por vrias vezes, pois isso essencial
para seu aprendizado. O importante no voc resolver exerccio X ou Y, mas sim entender o que
est acontecendo ali.
Os projetos sero o ponto mximo dos nossos estudos, onde iremos juntar o contedo de
alguns captulos para criar aplicaes reais, tendo com elas uma experincia prtica de um
verdadeiro desenvolvedor JavaScript!
Sobre a Capa 11
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 emrelao lgica empregada, e isso algo muito pessoal pois cada umvisualiza
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!
Chega de conversa, vamos aprender Java!!!
Meu amigo, de corao, nunca diga Java referindo-se nossa querida linguagemJavaScript. Nunca!!!
Este nome, infelizmente, foi uma terrvel escolha de marketing feita no incio da histria do
JavaScript. Como a linguagem Java estava muito em alta na poca em que o JavaScript foi criado,
resolveram nomear a linguagem de tal forma. Essa a maior semelhana que Java e JavaScript tem.
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 Associ-
ation), 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
Conhecendo o Idioma 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;
Conhecendo o Idioma JavaScript 18
3. Como inserir comentrios
4. Como nomear variveis;
5. O que so identificadores e palavras-reservadas.
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. =)
As Letras do Nosso Alfabeto
Nosso cdigo JavaScript escrito com base no padro Unicode, que podemos sucintamente definir
como um padro que permite aos computadores representar e manipular, de forma consistente, texto
de qualquer sistema de escrita existente. Este composto com mais de 107 mil caracteres!
JavaScript no JAVASCRIPT nem javascript!
A linguagem JavaScript faz diferenciao de letras maisculas de letras minsculas, portanto, todo
o devido cuidado deve ser tomado para evitar discordncias na chamada de funes e todas as
propriedades prprias do JavaScript e outras implementadas por voc.
1 var agora = 'teste minsculo';
2
3 console.log( Agora ); // -> ReferenceError: Agora is not defined
4 console.log( agora ); // -> 'teste minsculo'
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.
Conhecendo o Idioma JavaScript 19
Rodinhas, digo, Comentrios no Cdigo
Existe uma grande discusso de at que ponto interessante um cdigo muito comentado. Uns
defendem dizendo que tal prtica ajuda a esclarecer o que est ali feito, ajudando no futuro
quando voc revisitar tal seo, mas por outro lado, o lado prtico, vemos que muito comentrio
simplesmente quebra o fluxo de leitura do cdigo, fazendo com que voc tenha que ficar saltando
entre todos os textos, ou tendo que ler centenas/milhares de linhas a mais do que o necessrio.
Sem contar que quando o cdigo atualizado, o comentrio tambm deve ser, e um comentrio
desatualizado infinitas vezes pior do que a falta do mesmo.
Pense comigo, o que estamos fazendo j no escrever em uma linguagem? Tudo bem, eu sei que
a mesma diferente da nossa linguagem usada para comunicao interpessoal, porm, ela por si s
deve ser auto-explicvel. Como conseguir isso? Nomeando suas funes de forma inteligente por
exemplo, definindo no nome exatamente o que ela faz. E ai vem outra dica, cdigo modular vital
para o sucesso de um programa. E para ter algo modular, esse algo deve fazer uma, e apenas uma
tarefa. Conseguindo deixar um pedao isolado de cdigo fazendo apenas uma coisa, ser mais fcil
nomear essa coisa, fazendo com que o nome j se auto-explique.
Outra forma criar uma documentao para seu cdigo separado do mesmo, para evetuais consultas.
Isso algo bem elegante, diga-se de passagem.
Voc vai me dizer: Cara, voc no acha que est pegando pesado demais no?! Nem me mostrou
cdigo e j est me mandando modularizar?!
Ai meu amigo que a parte boa! Sendo modular, voc ter que fazer menos coisas! E assim ir ficar
mais fcil desde o incio da sua vida de programador =)
muito importante comear a trabalhar as ideias na sua cabea antes de serem implemen-
tadas. O conceito to importante quanto a prtica, para quem quer realmente dominar
o que est fazendo. E precisamos primeiro tentar criar algo, e depois de vrias tentativas e
erros, iremos conseguir fazer tal coisa da forma mais correta.
Voltando para os comentrios, as duas formas que temos de inseri-los nos nossos cdigos so:
Usando duas barras: //
Usando /* */
Vamos ver um exemplo:
Conhecendo o Idioma JavaScript 20
1 /* Essa parte do meu cdigo comentada
2 e com esse sinal eu posso fazer comentrios
3 em vrias linhas...
4 */
5 var valorX = 13;
6
7 // Com esse smbolo, o comentrio fica restrito a esta linha
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
Como Escrever Meu Cdigo
Ao longo do livro, voc ir aprender de forma prtica as melhores prticas de escrita de cdigo, mas
inicialmente voc apenas precisa saber que seu cdigo JavaScript pode conter qualquer quantidade
de espaos em branco entre os sinais delimitadores do programa e, por conseguinte, tambm ignora
quebra de linhas.
1 // cdigo vlido
2 var vazio = 'muito espao vazio aqui' ;
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.
Conhecendo o Idioma JavaScript 21
Sempre use Ponto e Vrgula ;
Ao final de suas instrues, voc tem a possibilidade de omitir o ponto e vrgula (;), smbolo esse
que mostra que uma instruo terminou.
O problema que, como falado anteriormente, isso pode gerar vrios erros (in)esperados. Mas fica
a seu critrio, pra que facilitar se podemos complicar, n?!
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 break
2 case catch continue
3 debugger default delete do
4 else
5 finally for function
6 if in instanceof
7 new
8 return
9 switch
10 this throw try typeof
11 var void
12 while with
Conhecendo o Idioma JavaScript 22
Na ECMAScript 5 temos mais palavras reservadas para uso futuro em novas implementaes do
padro, que so:
1 class
2 enum export extends
3 import
4 super
No strict mode (modo estrito da linguagem, veremos futuramente do que se trata), temos mais
algumas palavras reservadas para futuras implementaes
1 implements interface
2 let
3 package private protected public
4 static
5 yield
Veja mais sobre palavras reservadas aqui.
Concluso
Neste captulo ns aprendemos:
que JavaScript usa o padro Unicode para seus caracteres;
que JavaScript diferencia letras maisculas de minsculas;
maneiras de comentar, e por que evitar comentar;
que devemos sempre usar ponto e vrgula (;);
como criar identificadores e como usar os existentes (palavras reservadas).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
O Valor dos Tipos de Operadores -
Parte 1
O ttulo deste captulo uma representao dos trs assuntos que iremos aprender: Valores, Tipos
e Operadores.
Na primeira parte, iremos ver sobre:
1. Tipos de Dados
2. Tipo Number
3. Operadores Matemticos
4. Nmeros Especiais
5. Strings
Tipos de Dados
O que fazemos programando computadores basicamente manipular dados. No JavaScript, chama-
mos esses dados de valores. Estes valores so divididos em dois tipos:
O Valor dos Tipos de Operadores - Parte 1 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 esquecendoDigite 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() desneces-
sria 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.
O Valor dos Tipos de Operadores - Parte 1 25
1 /* verificao de tipos primitivos */
2 typeof 13 // tipo number
3 // -> "number"
4 typeof "javascript furtivo" // tipo string
5 // -> "string"
6 typeof true // tipo boolean
7 // -> "boolean"
8
9 /* tipos primitivos especiais */
10 var semValor = null; // tipo null
11 typeof semValor
12 // -> "object"
13
14 var semAtribuir; // tipo undefined
15 typeof semAtribuir
16 // -> "undefined"
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 // objeto do tipo array (vetor)
4 var guitarras = [ 'ibanez', 'music man', 'suhr' ];
5 typeof guitarras; // -> "object"
6
7 // objeto do tipo function
8 var soma = function( valor1, valor2 ) { return valor1 + valor2; }
9 typeof soma; // -> "function"
10
11 // objeto do tipo Date
12 var agora = new Date();
13 typeof agora; // -> "object"
14
15 // objeto do tipo RegExp
16 var minhaRegExp = /padrao/;
17 typeof minhaRegExp; // -> "object"
18
O Valor dos Tipos de Operadores - Parte 1 26
19 // objeto do tipo Error
20 var perigo = new Error( 'Alguma coisa deu errado!' );
21 typeof perigo; // -> "object"
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:
+: efetua a adio de dois nmeros (ou concatenao, no caso de strings);
-: efetua a subtrao de dois nmeros;
*: efetua a multiplicao de dois nmeros;
/: efetua a diviso de dois nmeros;
%: efetua a diviso entre dois nmeros, e retorna o resto da diviso.
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.
O Valor dos Tipos de Operadores - Parte 1 27
1 1.3 + 1.8 // -> 3.1
2
3 1.3 - 1.17 // -> 0.13000000000000012
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 // criando um nmero atravs do objeto Number
2 var test = Number( 'treze' );
3 test // -> NaN
4 typeof test // -> "number"
5
6 13 / 0 // -> Infinity
7
8 -13 / 0 // -> -Infinity
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 A == A; // -> false
4 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
O Valor dos Tipos de Operadores - Parte 1 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 var
2 frase01 = 'Este o pargrafo inicial...',
3 frase02 = "... complementado por este trecho.",
4 frase03 = '\nA partir daqui comea a ficar interessante...',
5 frase04 = '\tagora com tabulao, e \'aspas\' tambm',
6 texto = frase01 + frase02 + frase03 + frase04;
7
8 texto;
9 /*
10 -> "Este o pargrafo inicial...... complementado por este trecho.
11 A partir daqui comea a ficar interessante... agora com tabulao, e 'aspas' tamb\
12 m"
13 */
14
15 // Para escrever o mesmo texto acima como
16 // uma sentena nica, faramos assim:
17 var texto2 = 'Este o pargrafo inicial...\
18 ... complementado por este trecho.\
19 \nA partir daqui comea a ficar interessante...\
20 \tagora com tabulao, e \'aspas\' tambm';
21
22 texto2;
O Valor dos Tipos de Operadores - Parte 1 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.
O Valor dos Tipos de Operadores -
Parte 2
Continuando o ltimo captulo onde falavamos sobre valores, tipos e operadores, veja o que ser
visto neste captulo logo abaixo:
1. Valores Booleanos
2. Valores Truthy e Falsy
3. Truques com o Operador !
4. Cuidado com a Falsidade!
5. Valores undefined
6. Operadores Unrios
7. Operadores de Incremento
8. Operadores de Comparao
9. Coero (ou converso) de Tipo
10. Como Evitar a Coero de Tipo
11. Operadores Lgicos
12. Curiosidades sobre os Operadores Lgicos
13. Operador Ternrio
14. Regras de Precedncia
O Valor dos Tipos de Operadores - Parte 2 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.
Valores Truthy e Falsy
Agora voc j precisa ter os conceitos de valor, tipo e operador em JavaScript bem
consolidados. Faa um exerccio mental de definir para voc mesmo o que cada um .
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:
"0" (zero como string)
"false" (false como string)
function() {} (funes vazias)
[] (arrays vazios)
{} (objetos vazios)
O Valor dos Tipos de Operadores - Parte 2 32
Truques com o Operador !
Agora que sabemos exatamente quais valores booleanos cada valor do JavaScript carrega, podemos
tranquilamente e conscientemente utilizar o operador ! para obter o valor contrrio do natural do
valor em operao. Vamos aos exemplos, e portanto, ao console!:
1 !false // -> true
2 !0 // -> true
3 !"" // -> true
4 !NaN // -> true
5 !"0" // -> false
6 !"false" // -> false
7 !function() {} // -> false
8 !{} // -> 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 !!false // -> false
2 !!NaN // -> false
3 !!{} // -> true
4 !!function() {} // -> true
Cuidado com a Falsidade!
Iremos ver ainda neste captulo como comparar valores atravs dos operadores de comparao, mas
importantssimo que eu lhe explique mais uma ltima coisa sobre os valores falsy.
As regras de comparao entre estes valores um pouco no-intuitiva, logo ter o conhecimento dos
valores esperados em determinados casos crucial na hora de um eventual bug. Vamos ver quais
so essas peculiaridades.
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!!!
O Valor dos Tipos de Operadores - Parte 2 33
1 false == 0 // -> true
2 false == "" // -> true
3 0 == "" // -> true
null e undefined
Os valores null e undefined somente so equivalentes a eles mesmos. Vejamos:
1 null == false // -> false
2 null == null // -> true
3 undefined == false // -> false
4 undefined == undefined // -> true
5 undefined == null // -> 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 representa-
tividade 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 umtipo 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.
O Valor dos Tipos de Operadores - Parte 2 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 var total = 0;
2 total++ // -> 0 (valor foi alterado, mas ser percebido na prxima operao)
3 total // -> 1
4 ++total // -> 2
5 --total // -> 1
6 total-- // -> 1
7 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
O Valor dos Tipos de Operadores - Parte 2 35
Incrementando Nmeros e Strings
Estes operadores sero utilizados sempre por voc! So realmente MUITO importantes e elegantes,
diga-se de passagem. A funo deles adicionar mais contedo a antiga varivel mas sem precisar
declarar isso de forma verbosa (escrevendo mais do que se poderia/deveria). De fato, estes operadores
operam e atribuem o valor para a mesma varivel. Ele pode ser utilizado para somar, subtrair,
multiplicar e dividir nmeros, ou para concatenar novas strings em variveis que contm valores
deste tipo.
Vamos dar uma olhada como estes operadores trabalham.
1 // somando nmeros
2 var resultado = 7
3 resultado += 6 // -> 13
4
5 // concatenando strings
6 var meuNome = 'Eric'
7 meuNome += ' Douglas' // -> "Eric Douglas"
8
9 // subtraindo nmeros
10 resultado -= 6 // -> 7
11
12 // multiplicando nmeros
13 resultado *= 3 // -> 21
14
15 // dividindo nmeros
16 resultado /= 2 // -> 10.5
17
18 // resto da diviso de nmeros
19 resultado %= 2 // -> 0.5
20
21 // um exemplo de como somar na mesma varivel
22 // sem usar estes operadores
23 resultado = resultado + 0.8 // -> 1.3
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!
O Valor dos Tipos de Operadores - Parte 2 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
igual que - verifica se o nmero da esquerda maior ou igual ao nmero/string da direita
Cuidado ao Comparar Strings!
A maneira de comparar strings pode no ser muito intuitiva, pois qualquer letra maiscula ser
sempre menor que uma letra minscula.
Vamos confirmar toda essa teoria agora. J sab n? Console! =)
1 13 < 26 // -> true
2
3 'treze' < 'Vinte seis' // -> false *preste ateno aqui*
4
5 var treze = 13
6 treze <= 13 // -> true
7
8 26 > 13 // -> true
9 'vinte seis' > 'Treze' // -> true
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-
dade de forma restrita
Agrande diferena entre umoperador e outro que a primeira dupla (== e !=) ao comparar os valores,
caso eles no sejam do mesmo tipo, procedem com uma particularidade do JavaScript chamada de
Coero de Tipo (ou converso de tipo), e isso pode gerar muita dor de cabea para voc. Srio!
Irei explicar sobre coero de tipo no prximo tpico, mas antes vamos tentar entender pelo cdigo,
de forma prtica, como cada operador trabalha, e depois irei explicar de forma terica e encerrar o
assunto. Vamos l!
O Valor dos Tipos de Operadores - Parte 2 37
1 '13' == 13 // -> true
2 '13' != 13 // -> false
3
4 '13' === 13 // -> false
5 '13' !== 13 // -> true
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.
Como Evitar a Coero de Tipos
Para evitar toda essa preocupao, voc deve usar os operadores === e !==, que fazem a mesma
verificao de igualdade que seus primos, porm NO fazem coero de tipos!
ps: Por questes de segurana, sempre opte por usar os comparadores de igualdade restrita.
Parabns! Agora voc finalmente sabe o que essa bendita coero de tipos e como evit-la! lol
Quando algo que no obviamente um nmero convertido para tal, o valor dessa
operao convertido para NaN. Portanto, sempre que encontrar NaN em seu cdigo, procure
por coeres de tipo acidentais.
O Valor dos Tipos de Operadores - Parte 2 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.
Curiosidades sobre os Operadores Lgicos
Quando utilizamos os operadores lgicos fora de estruturas condicionais, eles tem uma forma
peculiar de trabalhar, que vale muito a pena ser entendida para que possamos deixar nosso cdigo
mais elegante e conciso.
Sempre que usamos && e ||, eles convertemo valor do lado esquerdo para umbooleano, para saberem
qual valor ser retornado dessa operao.
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.
O Valor dos Tipos de Operadores - Parte 2 39
1 var esquerda = '' // -> valor do tipo falsy
2 var direita = 13 // -> valor do tipo truthy
3
4 esquerda || direita // -> 13
5
6 var direita = 0 // -> agora vamos atribuir este valor falsy na direita e ver o qu\
7 e acontece
8
9 esquerda || direita // -> 0
10
11 // Agora vamos deixar ambos os valores truthy
12
13 esquerda = 13
14 direita = 31
15
16 esquerda || direita // -> 13
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.
Entendendo o Operador &&
Este operador faz o contrrio. Quando o valor da esquerda falsy, ele retornado, independente de
qual valor seja o da sua direita. E o valor da direita sempre ser retornado quando o da esquerda
for truthy, mesmo que este valor da direita seja falsy. Vamos ver o cdigo para ficar mais claro.
1 var esquerda = NaN // -> valor do tipo falsy
2 var direita = 13 // -> valor do tipo truthy
3
4 esquerda && direita // -> NaN
5
6 var esquerda = 31 // agora vamos atribuir um valor truthy na esquerda e ver o que\
7 acontece
8
9 esquerda && direita // -> 13
10
11 // Agora vamos deixar o valor da direita falsy
12
13 direita = ''
14
15 esquerda && direita // -> ''
O Valor dos Tipos de Operadores - Parte 2 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 var usuario = ''
2
3 // usando o operador ternrio
4 usuario ? usuario : 'convidado' // -> "convidado"
5
6 // atribuindo um valor a varivel usuario
7 usuario = 'Eric'
8
9 // usando o operador ternrio novamente
10 usuario ? usuario : 'convidado' // -> "Eric"
Como funciona isso? Lhe explico j!
Primeiramente criamos a varivel usuario e atribuimos uma string vazia a ela. Ou seja, um valor
falsy. Aps isso, usamos o operador ternrio que funciona da seguinte forma:
1. Indicamos a varivel ou condio que deve ser avaliada. No caso, usamos a varivel usuario.
2. Este valor a ser analisado ser transformado em um booleano, a partir de seu valor truthy/false
(est vendo a importncia da teoria?!)
3. Caso seu valor seja truthy, ento o operador retorna a instruo aps o sinal ?. Caso o valor
seja falsy, o valor retornado ser o que est aps o sinal :.
4. Voc pode retornar qualquer expresso JavaScript como valor de retorno dessa avaliao, veja
outro exemplo:
var cozinheiro = false
cozinheiro ? { receitas : [ carnes,doces,tortas
} ] console.log(mexido e olhe l!) // -> mexido e olhe l!
Entendeu como funciona? Esse operador muito legal! =D
ps: Altere o valor de cozinheiro para true e veja o que acontece!
O Valor dos Tipos de Operadores - Parte 2 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.
++, -- pr/ps incremento/decremento
! altera valor booleano
typeof, determina o tipo do operando
*, / e % multiplica, divide e resto
+ e - soma e subtrai
+ concatena strings
<, <=, > e >= comparao de ordem numrica
<, <=, > e >= comparao de ordem alfabtica
== teste de igualdade
!= teste de desigualdade
=== teste de igualdade restrita
!== teste de desigualdade restrita
&& E lgico
|| OU lgico
?: operador ternrio
= atribuio varivel ou propriedade
*=, /=, %=, += e -= operao e atribuio
Veja mais sobre regras de precendncia aqui
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
O que uma Expresso
Expresso um fragmento de cdigo JavaScript que pode ser interpretado para produo de um
valor. Fazendo uma breve analogia, a expresso est para seu programa JavaScript assim como uma
frase est para um texto. Um exemplo de expresso uma atribuio de valor uma varivel.
1 var atribui = 'e a nvoa comea a se dissipar...'
Podemos combinar expresses para formar outras mais elaboradas.
Vimos vrias expresses no captulo anterior, enquanto falvamos sobre os operadores.
Todos aqueles exemplos so timos para o entendimento de expresses. Na realidade, o que
iremos ver hoje apenas uma formalizao do estudo passado, apenas nomeando coisas
que j sabemos intuitivamente.
Aproveite pois o captulo de hoje ser bem leve, mas fique sabendo que nossa base para
criao de programas JavaScript est quase pronta, e em breve a diverso ir comear de
fato ;D
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 // Expresses Literais
2 13
3 "JavaScript Furtivo"
4
5 // Algumas Palavras Reservadas
6 true
7 false
8 null
9
10 // Referncias variveis
11 total
12 i
Expresses JavaScript 44
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 /* Inicializando de forma literal */
2 var meuObjeto = {}; // criado um objeto vazio
3 var meuArray = []; // criado um array vazio
4
5 /* Inicializando com Construtores */
6 var meuObjeto2 = new Object();
7 var meuArray2 = new Array();
8
9 // Quando criamos objetos/arrays vazios, podemos omitir os parnteses
10 var objetoVazio = new Object;
11 var arrayVazio = new Array;
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 var estudos = {
2 JavaScript: [
3 'NodeJS',
4 'AngularJS',
5 'ExpressJS',
6 'MongoDB'
7 ],
8 Outros: [ 'Jade', 'Stylus' ]
9 };
10
11 var livros = [
12 'Padres JavaScript',
Expresses JavaScript 45
13 'JavaScript: O Guia Definitivo',
14 'O Melhor do JavaScript'
15 ];
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 function nomeada() {
2 // outras expresses aqui
3 }
4
5 var outraFuncao = function(parametro1, parametro2) {
6 // mais expresses aqui
7 }
Expresses JavaScript 46
Expresses para Acessar Propriedades
Usamos esse tipo de expresso para obter o valor de alguma propriedade/item de um objeto ou
um array. Podemos fazer isso usando dois tipos de sintaxe diferentes, a de notao por ponto
(expressao.chave) ou a de notao por colchetes (expresso['chave']). Vamos ver com mais
detalhes cada uma delas.
Acessando Propriedades com ponto
expresso.chave
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 var guitarras = {
2 modelo1: 'music man',
3 modelo2: 'ibanez',
4 modelo3: 'prs',
5 cordas: [ 'elixir', 'daddario' ]
6 };
7
8 // Se quisermos ento saber o valor do modelo2...
9 guitarras.modelo2 // -> 'ibanez'
10
11 // O valor do segundo item do array "cordas"
12 guitarras.cordas.2 // -> SyntaxError: Unexpected number
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!
Acessando Itens e Propriedades com Colchetes
expresso['chave']
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 47
1 var guitarras = {
2 modelo1: 'music man',
3 modelo2: 'ibanez',
4 modelo3: 'prs',
5 cordas: [ 'elixir', 'daddario' ]
6 };
7
8 // Se quisermos ento saber o valor do modelo2...
9 guitarras['modelo2'] // -> 'ibanez'
10
11 // O valor do segundo item do array "cordas"
12 guitarras.cordas[1] // -> 'daddario'
13
14 // uma peculiaridade dessa notao: podemos passar um valor
15 // contido em uma varivel como a chave para buscar um item/propriedade
16 var modeloPreferido = 'modelo1';
17 guitarras[modeloPreferido] // -> 'music man'
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 // definindo uma funo: expresso de definio
2 function multiplica( valor1, valor2 ) {
3 return valor1 * valor2;
4 }
5
6 // chamando a funo: expresso de invocao
7 multiplica( 5, 8 ); // -> 40
8 multiplica( 3, 13 ); // -> 39
Entendendo o Processo de Invocao
Irei explicar sucintamente como funciona este processo, o qual ser devidamente aprofundado
quando estivermos falando especificamente sobre funes. Veja quais so as etapas:
1. Verificao da existncia de uma funo (ou objeto, visto que a funo um tipo de objeto)
com o nome passado. Caso no exista tal objeto, um erro lanado.
2. Criao de uma lista de valores a partir dos argumentos passados, que so avaliados para
produzirem tais valores.
3. Atribuio dos valores aos respectivos parmetros da funo.
4. Execuo do corpo da funo.
5. Se a funo tiver return, esse valor ser o retornado como resultado da avaliao da funo.
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 var cestaDeCompras = new Object();
2 var dataDeAgora = new Date();
3 var listaDeCompras = new Array();
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:
Expresses Matemticas ou Aritmticas: +, -, /, *, %
Expresses Relacionais: ==, ===, !=, !==, <, >, <=, >=
Expresses Lgicas: &&, ||, !
Expresses de Atribuio: +=, -=, *=, /=, %=