Javascriptfurtivo Sample

JavaScript FurtivoIniciando no mundo do desenvolvimento JavaScript!

Eric DouglasEsse 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 Publishingprocess. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools andmany iterations to get reader feedback, pivot until you have the right book and build traction onceyou do.

2014 Eric Douglas

Contedo

Apresentao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Motivao para este trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Bom, se tenho o livro de graa, por que pagar? . . . . . . . . . . . . . . . . . . . . . . . . 2Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Livros Modulares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Mas o que eu, leitor, ganho com isso? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Depoimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Sobre a Capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Foguete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Experimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Terno e Gravata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Dvidas e Consideraes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Prefcio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Ol JavaScript! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

O que JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Chega de conversa, vamos aprender Java!!! . . . . . . . . . . . . . . . . . . . . . . . . . . 15JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Conhecendo o Idioma JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17As Letras do Nosso Alfabeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18JavaScript no JAVASCRIPT nem javascript! . . . . . . . . . . . . . . . . . . . . . . . . . 18Rodinhas, digo, Comentrios no Cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Como Escrever Meu Cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Sempre use Ponto e Vrgula ; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Cartrio JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

O Valor dos Tipos de Operadores - Parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Tipos de Dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

CONTEDO

Operadores e Operaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Nmeros Especiais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

O Valor dos Tipos de Operadores - Parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Valores Booleanos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Valores Truthy e Falsy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Truques com o Operador ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Cuidado com a Falsidade! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Valores Undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Operadores Unrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Operadores de Incremento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Operadores de Comparao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Coero de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Como Evitar a Coero de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Operadores Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Curiosidades sobre os Operadores Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Operador Ternrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Regras de Precedncia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Expresses JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42O que uma Expresso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Expresses Bsicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Expresses de Inicializao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Expresses de Definio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Expresses para Acessar Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Expresses de Invocao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Expresses de Criao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Mais Expresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Apresentao

Neste livro iremos focar nos tpicos iniciais da linguagem JavaScript, sendo este um guia ideal paraquem est iniciando no desenvolvimento web, e tambm para quem j possui algum conhecimentomas pretende estudar com base em algum material mais aprofundado e com vrios exercciosprticos, 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 prticode como aplicar essas informaes. Os exerccios e projetos sero resolvidos e contaro com umadetalhada explicao, para total entendimento por parte do leitor.Outro ponto importante que comprometo-me a ser o mais prtico possvel. Sim, teoria timo enos d muita base, mas iremos ficar tambm bastante tempo no console testando e aplicando nossoscdigos.Para seu aprendizado ser consolidado, e a informao contida neste livro se transformar em seuconhecimento, extremamente necessrio que voc pratique todos os cdigos aqui presentes, econtinue 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 maneirapossvel!Alm disso, voc pode ficar por dentro das novidades do blog, novos livros/projetos e muito maissobre o universo JavaScript assinando a minha newsletter. Prometo que s ter links e assuntosteis relacionados ao universo do JavaScript! Nada de spam!

Motivao para este trabalhoTenho uma enorme satisfao em poder compartilhar conhecimento, e fao isso de forma maisempenhada ainda quando se trata de JavaScript!Sendo assim, para que este conhecimento no fique restrito apenas para quem pode pagar, mas estejadisponvel para todos que, de fato, queiram aprender, decidi criar este material e disponibiliz-lo deforma 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 atravsdela.

Bom, se tenho o livro de graa, por que pagar?

fato que o trabalho de se escrever um livro consomemuito tempo e exige uma grande dedicao.A compilao deste trabalho em formato de livro tem como objetivo experimentar uma nova formade compartilhar conhecimento, onde irei presente-lo com omelhor contedo que me for possvelcriar, 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 prpriade diviso do contedo a ser ensinado de forma modular. Irei te explicar melhor isso no pximocaptulo.Tendo este formato obtido xito, j tenho em mente outros temas para novas sries furtivas. Se vocest curioso em saber quais so estes possveis temas, irei lhe contar.

Prximos Temas NodeJS Meteor Expresshttps://www.facebook.com/groups/javascriptbrasil/https://www.facebook.com/groups/impJS/http://eepurl.com/TpAmvhttp://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.

ConclusoO objetivo desta srie ser uma referncia de material de alta qualidade sobre JavaScript, levandoo melhor do mundo terico e prtico para voc.Os grandes diferenciais so o contedo sintetizado e claro, levando o leitor direto aos pontos chavesda linguagem, e os diversos exerccios e projetos prticos resolvidos e comentados, que fecham ociclo do conhecimento e domnio real dos assuntos abordados.

A fortaleza ntima do homem a sua sinceridade de propsitos. Enquanto rvorescolossais 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 sistemaonde 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, JavaScriptFurtivo, ir abordar a estrutura (sintaxe) bsica da linguagem e a parte lgica utilizada em suasexpresses/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 livroestar 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 embreve).

Livros Modulares 5

Mas o que eu, leitor, ganho com isso?Liberdade!!!Acompanhe comigo a seguite situao:Imagine uma pessoa que j tem experincia comdesenvolvimento JavaScript, estudou seus princpiosbsicos e tem um bom entendimento do paradigma orientado a objetos, mas tem muita vontade deaprender mais sobre programao funcional, e gostou do contedo apresentado nesta srie, atravsdo 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 aprofundarem 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 lheinteressa. Justo!Ento, com essa viso que inicio essa nova maneira de dispor contedo, permitindo que o mesmoseja adquirido de forma independente.Outro ponto importante nessa abordagem que assim teremos mais liberdade para aprofundar emcada 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 livroJavaScript 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 pramim. 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 detodo 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 serlanado?

Sobre a Capa 10

Exatamente, um gasto absurdo de energia apenas para tir-lo do cho Mas no sobre foguetesque quero falar aqui, mas sim sobre dedicao e, principalmente hbito.Criar um (bom) hbito pode ser perfeitamente comparado com o lanamento de um foguete. Noincio, temos que lutar, nos esforar muito para conseguir apenas sair do cho, mas depois queconseguimos 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 conseguirobter 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 cdigosque tem o papel de deixar visual e mais palpvel este primeiro contato com um determinadoassunto.

Os exerccios estaro contidos no fim dos captulos, e tem o objetivo de verificar se vocrealmente aprendeu os assuntos em questo. Vale ressaltar que alm dos exerccios, no fim dolivro estaro todas as resolues dos mesmos, para auxili-lo quando necessrio, e tambma explicao detalhada de como o exerccio foi resolvido.

ps: Olhe a resoluo somente aps tentar resolver os exerccios por vrias vezes, pois isso essencialpara seu aprendizado. O importante no voc resolver exerccio X ou Y, mas sim entender o queest acontecendo ali.

Os projetos sero o ponto mximo dos nossos estudos, onde iremos juntar o contedo dealguns captulos para criar aplicaes reais, tendo com elas uma experincia prtica de umverdadeiro 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 dvidasestaro ligadasmais em relao lgica empregada, e isso algomuito pessoal pois cada umvisualizao problema de uma forma.No entanto, no se preocupe com acertar ou no. Se esforce para resolver o problema, pois caso noconsiga obter xito inicial em algum problema, quando voc verificar a resposta, essa ser muitomelhor 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, estaremosaptos a ser considerados verdadeiros desenvolvedores JavaScript com um slido conhecimento dalinguagem, 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 nosajudar no nosso dia a dia!

Dvidas e Consideraes

Caso voc tenha alguma dvida ou considerao a fazer sobre o material aqui apresentado, almdos locais mensionados no captulo Apresentao, voc tambm poder utilizar este grupo para secomunicar 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 decontedo, 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 alinguagem nos fornece para criar programas de lgica, e no ltimo captulo ser introduzido umtpico 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 aprofundamentonos temas futuros.Alm disso, para cada captulo do livro voc ter uma lista de exerccios correspondente, e tambma resoluo detalhada de cada exerccio, com explicaes minunciosas, passo a passo, para que vocpossa entender verdadeiramente TUDO que est sendo feito.E para fechar nosso ciclo de aprendizagem, teremos um projeto que ir englobar todos os assuntosabordados 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 aocompartilhar, pois pode lhe gerar algumas discusses, mas o fato que o mercado nunca foi tointeressante e animador para um programador JavaScript como agora, e nunca foi to onipresentepara qualquer linguagem como est sendo para o JavaScript!Srio, hoje podemos fazer maravilhas com o JavaScript, desde programao front-end (no lado docliente [navegador]), como no back-end com o espetacular Node.JS, que alm disso permitiu que oJavaScript 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 aplicaeshbridas 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 porestruturar e definir, semanticamente, quais elementos estaro presentes no nosso documento (outronome para nossa pgina HTML). muito importante ter em mente exatamente o que cadatecnologia nos oferece, para aproveitarmos o melhor de cada, e no delegar tarefas de uma paraa outra.O CSS responsvel de fazer o acabamento da casa, digo, da aplicao. a parte que devemosestilizar todo o documento, para que o mesmo no fique com cara de apenas um documento paraimpresso, 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 justamenteessa. A WWW (World Wide Web) foi criada com fim de auxiliar pesquisadores a mandarem seustrabalhos acadmicos uns para os outros. O HTML (HyperText Markup** Language, ou linguagemde marcao de hipertexto) foi a linguagem criada para identificao do navegador de onde se teriaum ttulo, um pargrafo, uma citao, e por ai vai O que vemos hoje com o HTML5 um sonhoutpico, analisando o cenrio atual com a mentalidade de quando esta tecnologia (HTML) foracriada.Por ltimo, e no menos importante, temos o JavaScript! Em relao a uma casa, a funo doJavaScript seria dar vida a casa, ou seja, seria a luz e a gua da mesma, por exemplo. De formamenos 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 umavez 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 minutoapenas para receber uma mensagem que seu formulrio foi preenchido incorretamenteIsso s o comeo, teremos uma longa caminhada para desvendar os segredos dessa linguagemfantstica 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 linguagem JavaScript.Nunca!!!Este nome, infelizmente, foi uma terrvel escolha de marketing feita no incio da histria doJavaScript. 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

JavaScriptNossa linguagem foi criada por Brendan Eich em 1995 quando omesmo trabalhava naNetscape (hojeMozilla). J teve o nome de Mocha e LiveScript, porm quando foi apresentada a implementao deJava nos navegadores da Netscape em conjunto com a Sun Microsystems (hoje Oracle), teve seunome 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 nosnavegadores.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 algumafeature (propriedade, recurso) da mesma no for comum entre os navegadores. A verso 5 a queiremos abordar principalmente nessa srie. E a prxima verso a 6 (ECMAScript 6), que deverser lanada em breve. Preocupe-se hoje com a 3 e 5, a 6 bom, no presente momento, apenas terconhecimento 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 oentendimento de como se d esse intercmbio dos caracteres que inserimos com a forma que osmesmos so interpretados pelo computador. Muito difcil? Vamos simplificar! algo bem simples, voc se comunica com outras pessoas atravs de uma linguagem, a qual nadamais que uma padronizao de sequncias de letras e fonemas que juntos referem-se a algumacoisa e do sentido a tal. Na rea da programao exatamente a mesma coisa! Temos que conheceras estruturas bsicas da linguagem para comearmos a montar palavras, frases e textos, que no nossocaso sero os programas.Essa estrutura de comunicao bsica, ou estrutura lxica, nos indica como a linguagem deve serescrita, sendo essa estrutura o nvel mais baixo de abstrao, nos indicando como criar e nomearvariveis, como inserir comentrios nos cdigos e como escrever as expresses e instrues quefaro 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 comentrios4. 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 aabsoro das informaes. Todo o contedo deste livro de suma importncia para seuaprendizado e crescimento como desenvolvedor JavaScript, porm, no pense que vocter 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 sotriviais, e isso que no final far toda a diferena e dar a sua satisfao em ter vencidocada etapa do processo. =)

As Letras do Nosso AlfabetoNosso cdigo JavaScript escrito com base no padro Unicode, que podemos sucintamente definircomo um padro que permite aos computadores representar e manipular, de forma consistente, textode 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, todoo devido cuidado deve ser tomado para evitar discordncias na chamada de funes e todas aspropriedades prprias do JavaScript e outras implementadas por voc.

1 var agora = 'teste minsculo';23 console.log( Agora ); // -> ReferenceError: Agora is not defined4 console.log( agora ); // -> 'teste minsculo'

Nesse cdigo acima, quando testado no Devtools do Chrome, por exemplo, ter como resultado osvalores na frente da seta ->.Veremos como comentar nosso cdigo agora.


Rodinhas, digo, Comentrios no CdigoExiste uma grande discusso de at que ponto interessante um cdigo muito comentado. Unsdefendem dizendo que tal prtica ajuda a esclarecer o que est ali feito, ajudando no futuroquando voc revisitar tal seo, mas por outro lado, o lado prtico, vemos que muito comentriosimplesmente quebra o fluxo de leitura do cdigo, fazendo com que voc tenha que ficar saltandoentre 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 comentriodesatualizado 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 quea mesma diferente da nossa linguagem usada para comunicao interpessoal, porm, ela por si sdeve ser auto-explicvel. Como conseguir isso? Nomeando suas funes de forma inteligente porexemplo, definindo no nome exatamente o que ela faz. E ai vem outra dica, cdigo modular vitalpara o sucesso de um programa. E para ter algo modular, esse algo deve fazer uma, e apenas umatarefa. Conseguindo deixar um pedao isolado de cdigo fazendo apenas uma coisa, ser mais fcilnomear essa coisa, fazendo com que o nome j se auto-explique.Outra forma criar uma documentao para seu cdigo separado domesmo, 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 mostroucdigo e j est me mandando modularizar?!Ai meu amigo que a parte boa! Sendo modular, voc ter que fazer menos coisas! E assim ir ficarmais 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 dominaro que est fazendo. E precisamos primeiro tentar criar algo, e depois de vrias tentativas eerros, 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:


1 /* Essa parte do meu cdigo comentada2 e com esse sinal eu posso fazer comentrios3 em vrias linhas...4 */5 var valorX = 13;67 // Com esse smbolo, o comentrio fica restrito a esta linha

O termo do ttulo dessa seo, rodinhas, se refere s rodinhas quando estamos aprendendoa 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, porquealgo ali no est muito correto

Provrbio Chins

Como Escrever Meu CdigoAo longo do livro, voc ir aprender de forma prtica asmelhores prticas de escrita de cdigo, masinicialmente voc apenas precisa saber que seu cdigo JavaScript pode conter qualquer quantidadede espaos em branco entre os sinais delimitadores do programa e, por conseguinte, tambm ignoraquebra de linhas.

1 // cdigo vlido2 var vazio = 'muito espao vazio aqui' ;

Tome cuidado com as quebras de linhas, pois como veremos no fim deste captulo, emdeterminadas situaes, o seu cdigo pode ter um ponto e vrgula (;) adicionado pelaprpria 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 doponto e vrgula. Por favor, seja caprichoso com seu cdigo, no porque voc pode fazeralgo que voc deve fazer.


Sempre use Ponto e Vrgula ;Ao final de suas instrues, voc tem a possibilidade de omitir o ponto e vrgula (;), smbolo esseque mostra que uma instruo terminou.O problema que, como falado anteriormente, isso pode gerar vrios erros (in)esperados. Mas ficaa seu critrio, pra que facilitar se podemos complicar, n?!

Cartrio JavaScriptSim, aqui iremos falar da parte mais pesada desse captulo, que foi bem leve, ento de fato essa aparte menos leve. Qual parte essa? Na verdade so duas: identificadores e palavras reservadas.

IdentificadoresUm 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 futuramentequando 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 ReservadasEssas palavras so as que j esto definidas na linguagem, portanto apenas as usaremos. Confiraabaixo algumas destas palavras:

1 break2 case catch continue3 debugger default delete do4 else5 finally for function6 if in instanceof7 new8 return9 switch10 this throw try typeof11 var void12 while with


Na ECMAScript 5 temos mais palavras reservadas para uso futuro em novas implementaes dopadro, que so:

1 class2 enum export extends3 import4 super

No strict mode (modo estrito da linguagem, veremos futuramente do que se trata), temos maisalgumas palavras reservadas para futuras implementaes

1 implements interface2 let3 package private protected public4 static5 yield

Veja mais sobre palavras reservadas aqui.

ConclusoNeste 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, Tipose Operadores.Na primeira parte, iremos ver sobre:

1. Tipos de Dados2. Tipo Number3. Operadores Matemticos4. Nmeros Especiais5. Strings

Tipos de DadosO que fazemos programando computadores basicamentemanipular 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 deforma real. Para isso, voc dever abrir o console do seu navegador (no Google Chrome voc podeusar o atalho ctrl shift j.Dentro da seo console existente nas ferramentas do desenvolvedor, voc dever digitar oscomandos abaixo, para perceber que tudo isso que te falei ali em cima verdade. O resultadoesperado 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 importantepara 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 cdigosmaiores,iremos rod-los atravs de nossa pgina html, e ai o comando console.log() ser degrande utilidade.


1 /* verificao de tipos primitivos */2 typeof 13 // tipo number3 // -> "number"4 typeof "javascript furtivo" // tipo string5 // -> "string"6 typeof true // tipo boolean7 // -> "boolean"89 /* tipos primitivos especiais */10 var semValor = null; // tipo null11 typeof semValor12 // -> "object"1314 var semAtribuir; // tipo undefined15 typeof semAtribuir16 // -> "undefined"

Olhando o cdigo acima, mais precisamente na parte de tipos primitivos especiais, voc podeperceber 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 foiherdado 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 */23 // objeto do tipo array (vetor)4 var guitarras = [ 'ibanez', 'music man', 'suhr' ];5 typeof guitarras; // -> "object"67 // objeto do tipo function8 var soma = function( valor1, valor2 ) { return valor1 + valor2; }9 typeof soma; // -> "function"1011 // objeto do tipo Date12 var agora = new Date();13 typeof agora; // -> "object"1415 // objeto do tipo RegExp16 var minhaRegExp = /padrao/;17 typeof minhaRegExp; // -> "object"18


19 // objeto do tipo Error20 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 poucopara respirar e beber uma gua, pois a partir de agora iremos aprofundar um pouco em cada tipoprimitivo de dados que acabamos de ver. Os tipos de objetos so mais complexos, e por isso cada umter um livro prprio (no mnimo)

NumberRepresentamos nmeros no JavaScript da mesma forma que escrevemos no nosso dia a dia. varnumero = 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 notaocientfica atravs da letra e, ficando nosso cdigo, no caso, assim: 1.313e13 que igual a 1.313 x10.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 comoaproximaes.

Operadores e OperaesAgora que conhecemos um pouco mais sobre os nmeros no JavaScript, vamos aprender a utilizaralguns 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 asoperaes abaixo e confira se o resultado o mesmo do indicado no comentrio.


1 1.3 + 1.8 // -> 3.123 1.3 - 1.17 // -> 0.1300000000000001245 1.3 * 10 // -> 1367 13 / 2 // -> 6.589 13 % 2 // -> 1

Nmeros EspeciaisTemos 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 aNumber (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 Number2 var test = Number( 'treze' );3 test // -> NaN4 typeof test // -> "number"56 13 / 0 // -> Infinity78 -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 seela 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. Vamosdar uma olhada mais de perto:1 var A = NaN;23 A == A; // -> false4 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 parao tipo number. Veja mais aqui.

https://gist.github.com/kitcambridge/1086528


StringsEste o tipo de dados bsico usado para representao de texto. Para o programa identificar umastring, 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 comuma certa ateno, como aspas, quebras de linha, tabulao entre outros, e toda a string deve serescrita como uma simples expresso, apesar de poder ser escrita em vrias linhas de cdigo, comoser demonstrado logo mais.Para fazer o escape dos caracteres especiais, utilizamos o smbolo da barra invertida \. Esse sinal nosdiz que temos algum caractere com significado especial na frase.Vamos praticar um pouco essa teoria das cordas.

1 var2 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;78 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 */1415 // Para escrever o mesmo texto acima como16 // 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';2122 texto2;


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 maisconveniente 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 algumascoisas.

O Valor dos Tipos de Operadores -Parte 2

Continuando o ltimo captulo onde falavamos sobre valores, tipos e operadores, veja o que servisto neste captulo logo abaixo:

1. Valores Booleanos2. Valores Truthy e Falsy3. Truques com o Operador !4. Cuidado com a Falsidade!5. Valores undefined6. Operadores Unrios7. Operadores de Incremento8. Operadores de Comparao9. Coero (ou converso) de Tipo10. Como Evitar a Coero de Tipo11. Operadores Lgicos12. Curiosidades sobre os Operadores Lgicos13. Operador Ternrio14. Regras de Precedncia


Valores BooleanosEsse 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 truqueutilizando 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 valorconsidervel, 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 bemconsolidados. 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 valorbooleano associado. Estes valores so claramente perceptveis quando fazemos comparaes entrevalores 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 truthypeculiares so:

"0" (zero como string) "false" (false como string) function() {} (funes vazias) [] (arrays vazios) {} (objetos vazios)


Truques com o Operador !Agora que sabemos exatamente quais valores booleanos cada valor do JavaScript carrega, podemostranquilamente e conscientemente utilizar o operador ! para obter o valor contrrio do natural dovalor em operao. Vamos aos exemplos, e portanto, ao console!:

1 !false // -> true2 !0 // -> true3 !"" // -> true4 !NaN // -> true5 !"0" // -> false6 !"false" // -> false7 !function() {} // -> false8 !{} // -> false

Um modo interessante de saber qual o valor truthy ou falsy de um valor negando-o duas vezescom o operador !. Sim, como na Matemtica, -1 x -1 = 1. Ento temos que:

1 !!false // -> false2 !!NaN // -> false3 !!{} // -> true4 !!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 dosvalores esperados em determinados casos crucial na hora de um eventual bug. Vamos ver quaisso 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 dasexpresses, pois estamos fazendo apenas um teste rpido, porm no seu cdigo JavaScriptde fato, sempre utilize o ponto e vrgula!!!


1 false == 0 // -> true2 false == "" // -> true3 0 == "" // -> true

null e undefinedOs valores null e undefined somente so equivalentes a eles mesmos. Vejamos:

1 null == false // -> false2 null == null // -> true3 undefined == false // -> false4 undefined == undefined // -> true5 undefined == null // -> true

O ltimo valor falsy que temos para citar o NaN, porm este j foi abordado no captulo anterior, esabemos que o nico tipo de dado em JavaScript que no igual a ele mesmo.

Valores UndefinedTemos 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 voulhe explicar agora! =)Como j foi explicado no captulo anterior, na realidade apenas undefined de fato um tipo primitivode 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 valornesta varivel.Confira os exemplos no captulo anterior na seo tipos de dados para fixar esta diferena.

Operadores UnriosAlguns operadores so palavras ao invs de smbolos. Utilizamos um destes operadores muito nosexemplos do captulo anterior, o operador typeof, que produz uma string identificando o tipo dovalor do elemento que voc passou a ele.ps: Para ver o operador typeof em funcionamento, volte no captulo anterior onde voc encontrarvrios exemplos da utilizao dele.


Outros operadores unrios so delete e void. Para este material no se tornar muito extenso, vocpode procurar o que cada um faz aqui(delete) e aqui(void).

Operadores unrios utilizam um valor para fazer seu trabalho, operadores binrios eternrios, dois e trs valores respectivamente.

Operadores de IncrementoTemos dois tipos de operadores de incremento: os utilizados para nmeros e os utilizados para stringse nmeros.

Incrementando NmerosOs operadores ++ e -- so utilizados para incrementar variveis/valores do tipo number. Sooperadores frequentemente utilizados para auxiliar na estrutura lgica do programa, aumentandoou diminuindo em uma unidade o valor da varivel. A partir do prximo captulo iremos comeara focar em pedaos de cdigo maiores, e assim iniciar a criao de mini-programas, para depoischegarmos 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, sendoassim denominados operadores de pr-incremento ou ps-incremento. Qual a diferena entreeles? A diferena que quando utilizamos o operador antes da varivel, ela ser alterada antes daexecuo do cdigo, ento o valor processado para a operao atual ser o j modificado, e quandousamos o operador depois da varivel, essa alterao ser percebida apenas depois quando estavarivel for solicitada.Vamos aos testes!

1 var total = 0;2 total++ // -> 0 (valor foi alterado, mas ser percebido na prxima operao)3 total // -> 14 ++total // -> 25 --total // -> 16 total-- // -> 17 total // -> 0

https://developer.mozilla.org/pt-BR/docs/JavaScript/Guide/Expressions_and_Operators#deletehttps://developer.mozilla.org/pt-BR/docs/JavaScript/Guide/Expressions_and_Operators#void


Incrementando Nmeros e StringsEstes 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 precisardeclarar isso de forma verbosa (escrevendomais do que se poderia/deveria). De fato, estes operadoresoperam 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 valoresdeste tipo.Vamos dar uma olhada como estes operadores trabalham.

1 // somando nmeros2 var resultado = 73 resultado += 6 // -> 1345 // concatenando strings6 var meuNome = 'Eric'7 meuNome += ' Douglas' // -> "Eric Douglas"89 // subtraindo nmeros10 resultado -= 6 // -> 71112 // multiplicando nmeros13 resultado *= 3 // -> 211415 // dividindo nmeros16 resultado /= 2 // -> 10.51718 // resto da diviso de nmeros19 resultado %= 2 // -> 0.52021 // um exemplo de como somar na mesma varivel22 // sem usar estes operadores23 resultado = resultado + 0.8 // -> 1.3

Operadores de ComparaoOperadores de comparao so um dos tipos de operadores binrios, que no caso, utilizam doisvalores 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 doprograma.Vamos conhecer estes operadores!


< :menor que - verifica se o nmero da esquerda menor que o nmero/string da direita :maior que - verifica se o nmero da esquerda maior que o nmero/string da direita >= :maior ouigual 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 sersempre menor que uma letra minscula.Vamos confirmar toda essa teoria agora. J sab n? Console! =)

1 13 < 26 // -> true23 'treze' < 'Vinte seis' // -> false *preste ateno aqui*45 var treze = 136 treze true78 26 > 13 // -> true9 'vinte seis' > 'Treze' // -> true

Comparadores de IgualdadeAlm dos comparadores mostrados acima, tambm temos os comparadores de igualdade, que soconstantemente usados em nossos cdigos, porm tem algumas peculiaridades que se voc nosouber, certamente ir gerar erros nos seus programas. Mas fique tranquilo, bem simples deentender a diferena entre eles, e irei lhe provar agora! Primeiro, vamos conhecer quais so estesoutros operadores.==: testa igualdade !=: testa desigualdade ===: testa igualdade de forma restrita !==: testa desigual-dade de forma restritaAgrande diferena entre um operador 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 deCoero 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 oassunto. Vamos l!


1 '13' == 13 // -> true2 '13' != 13 // -> false34 '13' === 13 // -> false5 '13' !== 13 // -> true

Vale ressaltar mais uma vez Entender o que est acontecendo no cdigo superimportante, e muitas vezes temos que realmente ler vrias vezes e/ou ficar vrios minutospara conseguir entend-lo. E sim, isso algo super importante, no tenha d de investirtempo nisso!

Neste prximo tpico irei lhe explicar o que aconteceu no cdigo anterior, ento, vamos para oprximo!

Coero de TiposO nome assusta um pouco n?! E de fato devemos ter cuidado com isso pois surgem muitas bugs noseu 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 receberum 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 operaescom tipos de dados diferentes, o JavaScript nos agracia com a converso de um dos valores paraalgum outro tipo S que o grande e terrvel problema disso que dificilmente voc consegue preverqual ser este novo valor, pois as regras para tal converso no so intuitivas, o que pode causaralguma(s) falha(s) em sua aplicao.

Como Evitar a Coero de TiposPara evitar toda essa preocupao, voc deve usar os operadores === e !==, que fazem a mesmaverificao 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 dessaoperao convertido para NaN. Portanto, sempre que encontrar NaN em seu cdigo, procurepor coeres de tipo acidentais.


Operadores LgicosSempre que pensamos na parte lgica do programa devemos pensar em valores booleanos, e paragerar estes valores booleanos a partir dos valores que nossas variveis carregam, iremos usar osoperadores lgicos, que so um tipo de operador binrio, ou seja, necessitam de dois valores paragerao de um terceiro.ps: O operador ! um operador lgico pois retorna um valor booleano, porm uma exceo a regrapor 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 lgicoEste 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 prximocaptulo. Por enquanto voc s precisa saber disso.

|| OU lgicoEste operador lgico e binrio retorna true se um dos valores forem verdadeiros.

! NO lgicoComo j vimos anteriormente, este operador transforma o operando em booleano, porm com apeculiaridade de inverter seu valor truthy/falsy para um booleano de fato.

Curiosidades sobre os Operadores LgicosQuando utilizamos os operadores lgicos fora de estruturas condicionais, eles tem uma formapeculiar de trabalhar, que vale muito a pena ser entendida para que possamos deixar nosso cdigomais elegante e conciso.Sempre que usamos && e ||, eles convertem o valor do lado esquerdo para um booleano, para saberemqual 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, independentede qual valor seja esse, at mesmo outro valor falsy. Veja isso na prtica.


1 var esquerda = '' // -> valor do tipo falsy2 var direita = 13 // -> valor do tipo truthy34 esquerda || direita // -> 1356 var direita = 0 // -> agora vamos atribuir este valor falsy na direita e ver o qu\7 e acontece89 esquerda || direita // -> 01011 // Agora vamos deixar ambos os valores truthy1213 esquerda = 1314 direita = 311516 esquerda || direita // -> 13

Viram? Mesmo o valor da direita sendo falsy, ele retornado pois a regra : se o valor da esquerdafor falsy, retorne o da direita sem nem ver qual . E depois, quando alteramos o valor da esquerdapara 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 dequal valor seja o da sua direita. E o valor da direita sempre ser retornado quando o da esquerdafor truthy, mesmo que este valor da direita seja falsy. Vamos ver o cdigo para ficar mais claro.1 var esquerda = NaN // -> valor do tipo falsy2 var direita = 13 // -> valor do tipo truthy34 esquerda && direita // -> NaN56 var esquerda = 31 // agora vamos atribuir um valor truthy na esquerda e ver o que\7 acontece89 esquerda && direita // -> 131011 // Agora vamos deixar o valor da direita falsy1213 direita = ''1415 esquerda && direita // -> ''


Muito bom! Estamos quase terminando, e a essa altura voc j sabe de vrias peculiaridades doJavaScript! Vamos em frente =)

Operador TernrioEste operador de fato muito poderoso, pois evita verbosidade no cdigo, deixando-o ento bemmais 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 = ''23 // usando o operador ternrio4 usuario ? usuario : 'convidado' // -> "convidado"56 // atribuindo um valor a varivel usuario7 usuario = 'Eric'89 // usando o operador ternrio novamente10 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 valorfalsy. 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! =Dps: Altere o valor de cozinheiro para true e veja o que acontece!


Regras de PrecednciaPara saber qual operao ir ocorrer primeiro, voc precisa conhecer a ordem de precedncia dosoperadores. Confira abaixo a lista na ordem do maior (no topo) para o menor (embaixo) operadorem 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 = comparao de ordem numrica = 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

ConclusoFinalmente terminamos! Bom, esse foi o maior captulo at agora, e com certeza foi o maisinteressante, por termos visto vrias peculiaridades da linguagem JavaScript e termos sedimentadouma 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 falaremosexclusivamente sobre expresses. Confira um resumo do que ser abordado:

1. O que uma Expresso?2. Expresses Bsicas3. 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 ExpressoExpresso um fragmento de cdigo JavaScript que pode ser interpretado para produo de umvalor. Fazendo uma breve analogia, a expresso est para seu programa JavaScript assim como umafrase 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 queiremos ver hoje apenas uma formalizao do estudo passado, apenas nomeando coisasque j sabemos intuitivamente.Aproveite pois o captulo de hoje ser bem leve, mas fique sabendo que nossa base paracriao de programas JavaScript est quase pronta, e em breve a diverso ir comear defato ;D

Expresses BsicasEsse tipo de expresses so assim denominadas pois no incluem outras expresses, ou seja, so omenor fragmento possvel do nosso cdigo. Vejamos alguns exemplos:

1 // Expresses Literais2 133 "JavaScript Furtivo"45 // Algumas Palavras Reservadas6 true7 false8 null910 // Referncias variveis11 total12 i


Expresses de InicializaoEssas expresses somuito importantes, pois nos possibilitam a criao de objetos e arrays de formaliteral, e isso nos d uma facilidade e praticidade muito grande na hora de tais tarefas. Veja abaixoa forma de se criar um objeto e array de forma literal e da forma utilizada com o auxlios de seusconstrutores (iremos conhecer mais sobre construtores futuramente).

1 /* Inicializando de forma literal */2 var meuObjeto = {}; // criado um objeto vazio3 var meuArray = []; // criado um array vazio45 /* Inicializando com Construtores */6 var meuObjeto2 = new Object();7 var meuArray2 = new Array();89 // Quando criamos objetos/arrays vazios, podemos omitir os parnteses10 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 semmoderao!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, umobjeto, um array, s so teis por carregarem em si valores agrupados de acordo com algumpropsito. Alm de valores bsicos, podemos tambm passar valores complexos para expressescomplexas. Traduzindo, ter arrays dentro de arrays, objetos dentro de objetos, arrays dentro deobjetos, objetos dentro de arrays, e por ai vaiVamos 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 };1011 var livros = [12 'Padres JavaScript',


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 demaisvalores), temos as propriedades JavaScript e Outros recebendo arrays como valores, e estes arraysrecebem strings, por sua vez.No caso da varivel livros, que um array [], ela recebe trs strings como itens de sua lista devalores.Brinque um pouco agora criando arrays e objetos de diferentes tipos, preenchidos com diversosvalores!

Expresses de DefinioUsamos essa expresso para definir uma funo em nosso programa. Para criarmos essa expressodevemos seguir os seguintes passos:

1. Usar a palavra chave function2. [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 serfeitas 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 entonome-la.Veja alguns exemplos:

1 function nomeada() {2 // outras expresses aqui3 }45 var outraFuncao = function(parametro1, parametro2) {6 // mais expresses aqui7 }


Expresses para Acessar PropriedadesUsamos esse tipo de expresso para obter o valor de alguma propriedade/item de um objeto ouum 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 maisdetalhes cada uma delas.

Acessando Propriedades com ponto

expresso.chave

Essa forma utilizada exclusivamente para acessar propriedades e mtodos de objetos. Onde temosescrito expresso, iremos utilizar o nome do nosso objeto, e onde temos chave, iremos passar o nomeda 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 };78 // Se quisermos ento saber o valor do modelo2...9 guitarras.modelo2 // -> 'ibanez'1011 // 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 devepelo motivo que para acessar itens de arrays, utilizamos outro tipo de notao, que irei lhe explicaragora!

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 umobjeto. Onde temos o valor expresso iremos substituir pelo nome do array ou objeto, e onde temoschave, 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 oarray com esta notao por colchetes.


1 var guitarras = {2 modelo1: 'music man',3 modelo2: 'ibanez',4 modelo3: 'prs',5 cordas: [ 'elixir', 'daddario' ]6 };78 // Se quisermos ento saber o valor do modelo2...9 guitarras['modelo2'] // -> 'ibanez'1011 // O valor do segundo item do array "cordas"12 guitarras.cordas[1] // -> 'daddario'1314 // uma peculiaridade dessa notao: podemos passar um valor15 // contido em uma varivel como a chave para buscar um item/propriedade16 var modeloPreferido = 'modelo1';17 guitarras[modeloPreferido] // -> 'music man'

Dicas de Acessibilidade Caso voc tente acessar propriedades em null e undefined, voc obter uma exceoTypeError, ou seja, um erro, pois esses valores no podem ter propriedades.

Caso acesse uma propriedade ou ndice que no esteja definido, o valor retornado serundefined.

A notao de ponto, por ser mais direta, deve ser utilizada quando j se sabe exatamente qualpropriedade ser acessada.

A notao por colchetes permite que seja passado variveis como valor para acesso, pois casoa propriedade tenha sua chave (identificador) sendo um nmero, contendo espao no nomeou sendo uma palavra reservada de JavaScript, a nica forma de acess-la assim, atravs danotao de colchetes, utilizando ou no uma varivel para conteno desse valor.

Expresses de InvocaoEssa expresso utilizada para chamar (invocar, executar) uma funo ou mtodo.

Quando uma funo est atribuda uma chave em um objeto, essa passa a se chamarmtodo.

Para usar essa expresso devemos indicar o nome da funo que desejamos invocar seguida deparnteses. Caso a funo receba argumentos, os mesmos devem ser passados dentro dos parnteses.


ps: Lembre-se de usar no seu cdigo o ; depois de chamar a funo! Somente omitiremos o ponto evrgula no console para agilizar os testes.Vamos ver um exemplo:

1 // definindo uma funo: expresso de definio2 function multiplica( valor1, valor2 ) {3 return valor1 * valor2;4 }56 // chamando a funo: expresso de invocao7 multiplica( 5, 8 ); // -> 408 multiplica( 3, 13 ); // -> 39

Entendendo o Processo de InvocaoIrei explicar sucintamente como funciona este processo, o qual ser devidamente aprofundadoquando 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 paraproduzirem 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 dessasexpresses, 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 apalavra 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();


Mais ExpressesNo ltimo captulo j vimos vrios exemplos de expresses que utilizam operadores. Irei deixar aquiindicado o nome da expresso com seus respectivos operadores, e aps vista a teoria aqui, v para ooutro 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: +=, -=, *=, /=, %=

ndice analticoApresentaoMotivao para este trabalhoBom, se tenho o livro de graa, por que pagar?Concluso

Livros ModularesMas o que eu, leitor, ganho com isso?

DepoimentosSobre a CapaFogueteExperimentosTerno e Gravata

Dvidas e ConsideraesPrefcioOl JavaScript!O que JavaScript?Chega de conversa, vamos aprender Java!!!JavaScript

Conhecendo o Idioma JavaScriptAs ``Letras'' do Nosso AlfabetoJavaScript no JAVASCRIPT nem javascript!``Rodinhas'', digo, Comentrios no CdigoComo Escrever Meu CdigoSempre use Ponto e Vrgula ;Cartrio JavaScriptConcluso

O Valor dos Tipos de Operadores - Parte 1Tipos de DadosNumberOperadores e OperaesNmeros EspeciaisStrings

O Valor dos Tipos de Operadores - Parte 2Valores BooleanosValores Truthy e FalsyTruques com o Operador !Cuidado com a Falsidade!Valores UndefinedOperadores UnriosOperadores de IncrementoOperadores de ComparaoCoero de TiposComo Evitar a Coero de TiposOperadores LgicosCuriosidades sobre os Operadores LgicosOperador TernrioRegras de PrecednciaConcluso

Expresses JavaScriptO que uma ExpressoExpresses BsicasExpresses de InicializaoExpresses de DefinioExpresses para Acessar PropriedadesExpresses de InvocaoExpresses de CriaoMais Expresses

Javascriptfurtivo Sample

Documents

Transcript of Javascriptfurtivo Sample