SlideShare uma empresa Scribd logo
1 de 409
Desvendando a linguagem JavaScript
Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
Formado em Ciências da Computação pela UFSC e
MBA em Gerenciamento de Projetos pela FGV, é
arquiteto de software há mais de 15 anos,
especialista nas linguagens Java e JavaScript. É
também autor do livro AngularJS Essentials e de
diversos artigos da revista Java Magazine. Além disso,
é professor e palestrante, tendo participado da formação de mais de
1.000 desenvolvedores de software e apresentado mais de 100
palestras em eventos no Brasil e no exterior. Fundador da Agile Code,
uma empresa de treinamento e consultoria, atualmente é
apresentador de um canal no YouTube sobre JavaScript, AngularJS e
muito mais!
Acompanhe a série Desvendando a linguagem
JavaScript pelo YouTube em:
http://www.youtube.com/rodrigobranas
JavaScript é uma das linguagens
mais populares do mundo!
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Mas ao mesmo tempo é uma das
linguagens mais odiadas!
Alguém aqui odeia JavaScript?
Boa parte dos problemas tem relação direta
com a DOM, não com a linguagem
DOM, ou Document Object Model, é uma API
padronizada pela W3C em 1998 que permite a
manipulação de documentos escritos em HTML,
XHTML e XML.
Você costuma ler o manual antes de
utilizar um produto que comprou?
Desvendando a linguagem JavaScript
"A linguagem JavaScript é a única que as
pessoas acham que não precisam aprender
antes de começar a utilizar"
(Douglas Crockford)
O problema é que ela é utiliza conceitos
bem diferentes das outras linguagens
que estamos acostumados!
Era uma vez, uma linguagem de
programação chamada HyperTalk
A linguagem foi criada por Dan Winkler em
1987 para a plataforma HyperCard da Apple
Desvendando a linguagem JavaScript
Linguagem HyperTalk
Extremamente amigável, ideal para iniciantes
1. on mouseUp
2. put "100,100" into pos
3. repeat with x = 1 to the number of card buttons
4. set the location of card button x to pos
5. add 15 to item 1 of pos
6. end repeat
7. end mouseUp
A Netscape teve a ideia de implementar
um conceito semelhante!
Então, contrataram Brendan Eich para
essa difícil missão!
Na ocasião, pelo sua afinidade com a
linguagem Scheme, ele propos utilizá-la
Até que um dia, alguém na Netscape
descobriu o que era Scheme!
Linguagem Scheme
Menos amigável, funcional, baseada em LISP
1. (define (list-of-squares n)
2. (let loop ((i n) (res '()))
3. (if (< i 0)
4. res
5. (loop (- i 1) (cons (* i i) res)))))
6. (list-of-squares 9) ===> (0 1 4 9 16 25 36 49 64 81)
Com base no público alvo, a linguagem
precisava ser baseada em algo mais popular
Desvendando a linguagem JavaScript
Brendan Eich utilizou como base as
linguagens Java, Scheme, Self e com
algumas influências de Perl
Java
• Sintaxe
• Algumas
convenções
• Date
• Math
Scheme
• Lambda
• Closure
• Tipagem fraca
Self
• Herança baseada
em protótipos
• Objetos dinâmicos
Perl
• Expressões
Regulares
Seu primeiro nome foi Mocha, por
sugestão de Marc Andreessen, fundador
da Netscape
A linguagem foi lançada oficialmente em
Setembro de 1995 com o nome de LiveScript na
versão beta do Netscape Navigator 2.0
Browser's World War
Em Dezembro, o nome da linguagem mudou para
JavaScript, a partir de um acordo feito com a Sun
com o objetivo de destruir a Microsoft
O nome JavaScript, foi registrado como uma marca
pertencente a Sun e era de uso exclusivo da Netscape
A Microsoft fez uma engenharia reversa da
linguagem da Netscape, criando a
linguagem JScript
Com medo de perder o controle, a Netscape busca
uma série de entidades como a W3C e a ISO com o
objetivo de padronizar a linguagem
Em 1997, após algumas tentativas, a Netscape
conseguiu padronizar a linguagem junto a ECMA
Internacional, nomeando-a ECMAScript
Características da linguagem
JavaScript
• A linguagem JavaScript é interpretada
• A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
• A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
• Além disso, possui funções de primeira
classe
• A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
• Além disso, possui funções de primeira
classe
• A linguagem não apresenta suporte a
programação multi-thread
• A linguagem JavaScript é interpretada
• Possui orientação a objetos baseada
em protótipos, não possuindo classes
• A linguagem possui uma tipagem fraca
e dinâmica
• Além disso, possui funções de primeira
classe
• A linguagem não apresenta suporte a
programação multi-thread
• Está atualmente na versão 6
Desvendando a linguagem JavaScript
Variáveis
As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
• Após a primeira letra, podem conter
números
As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
• Após a primeira letra, podem conter
números
• Pela convenção, começam com letra
minúscula e usam camelCase
As variáveis devem ser criadas seguindo as
regras:
• Devem começar por uma letra, $ ou _
• Após a primeira letra, podem conter
números
• Pela convenção, começam com letra
minúscula e usam camelCase
• São case-sensitive
Declarando uma variável
1. var name = "AgileCode";
2. var top10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
3. var $scope = {title: "JavaScript", version: "6"};
4. var _person = "John";
5. var numberCode = 897987987;
6. var a = 10, b = 9, c = 8;
7. var language;
Number
Criando um Number
1. var nota = 10;
2.
3. nota.toExponencial(2); // 100
4. nota.toFixed(2); // 10.00
5. nota.toPrecision(1); // 1e+1
6. nota.toString(); // "10"
7. nota.valueOf(); // 10
Só existe um tipo numérico na linguagem e ele
tem as seguintes características:
• IEEE-754 (Standard for Floating-Point)
Só existe um tipo numérico na linguagem e ele
tem as seguintes características:
• IEEE-754 (Standard for Floating-Point)
• binary64 ou Double Precision
Só existe um tipo numérico na linguagem e ele
tem as seguintes características:
• IEEE-754 (Standard for Floating-Point)
• binary64 ou Double Precision
• Cuidado com as exceções!
Desvendando a linguagem JavaScript
> 0.1 + 0.2
> 0.1 + 0.2
0.30000000000000004
> 0.1 + 0.2
0.30000000000000004
> 3 / 0
> 0.1 + 0.2
0.30000000000000004
> 3 / 0
Infinity
> 0.1 + 0.2
0.30000000000000004
> 3 / 0
Infinity
> "AgileCode" * 10;
> 0.1 + 0.2
0.30000000000000004
> 3 / 0
Infinity
> "AgileCode" * 10;
NaN
Math API
Similar a classe Math da linguagem Java
• abs – Valor absoluto do número
• floor – Valor inteiro do número
• log – Logarítmo natural do número (base E)
• min – Retorna o menor número
• max – Retorna o maior número
• pow - Potência do número
• random – Gera um número randômico
• round – Arredonda o número para o inteiro mais próximo
• sin - Seno do número
• sqrt - Raíz quadrada do número
• tan – Tangente do número
String
Uma String é composta por uma sequência de
0 ou mais caracteres com as seguintes
características:
• São imutáveis
Uma String é composta por uma sequência de
0 ou mais caracteres com as seguintes
características:
• São imutáveis
• Podem ser declaradas com aspas simples
ou duplas
Criando uma String
1. var nome = "AgileCode";
2.
3. nome.chatAt(2); // "i"
4. nome.charCodeAt(0); // 65
5. nome.concat("!"); // "AgileCode!"
6. nome.indexOf('e'); // 4
7. nome.replace('Code', '!'); // "Agile!"
8. nome.split('e'); // ['Agil', 'Cod', ''];
String API
• chartAt – Retorna o char da posição
• charCodeAt – Retorna o código do char da posição
• concat – Concatena duas Strings
• indexOf – Retorna o índice da primeira ocorrência do char
• lastIndexOf – Retorna o índice da última ocorrência do char
• match – Retorna uma array resultante da busca com RegExp
• replace – Substitui parte da String por outra
• search – Retorna a posição da String ou RegExp
• slice – Extrai parte da String, retornando uma nova
• split – Divide a String com base na expressão regular informada
• substring - Extrai a parte da String desejada
• toLowerCase – Gera uma nova String em letra minúscula
• toUpperCase – Gera uma nova String em letra maiúscula
• trim – Remove os espaços em branco do início e do fim da String
• valueOf – Retorna o valor primitivo da String
Boolean
Criando um Boolean
1. var isento = true;
2. var estudante = false;
3.
4. isento.toString(); // "true"
5. estudante.valueOf(); // false
Cuidado com os perigosos e confusos
tipos truthy e falsy
A linguagem JavaScript assume o estado
de determinados tipos como true ou
false, dependendo do caso.
> !!0
> !!0
false
> !!0
false
> !!NaN
> !!0
false
> !!NaN
false
> !!0
false
> !!NaN
false
> !!''
> !!0
false
> !!NaN
false
> !!''
false
> !!0
false
> !!NaN
false
> !!''
false
> !!false
> !!0
false
> !!NaN
false
> !!''
false
> !!false
false
> !!0
false
> !!NaN
false
> !!''
false
> !!false
false
> !!null
> !!0
false
> !!NaN
false
> !!''
false
> !!false
false
> !!null
false
> !!0
false
> !!NaN
false
> !!''
false
> !!false
false
> !!null
false
> !!undefined
> !!0
false
> !!NaN
false
> !!''
false
> !!false
false
> !!null
false
> !!undefined
false
Todos os outros são truthy por padrão
undefined
O tipo undefined é retornado caso uma
propriedade de um determinado objeto seja
consultada e não exista
null
O tipo null indica a ausência de valor em uma
determinada propriedade já existente
Object
Um objeto é uma coleção dinâmica de chaves e
valores de qualquer tipo de dado.
É possível adicionar ou remover propriedades a
qualquer momento.
Criando um Object
1. var pessoa = {};
Adicionando propriedades ao objeto
1. var pessoa = {
2. nome: "João",
3. };
Adicionando propriedades ao objeto
1. var pessoa = {
2. nome: "João",
3. idade: 20,
4. };
Adicionando propriedades ao objeto
1. var pessoa = {
2. nome: "João",
3. idade: 20,
4. telefone: null,
5. };
Adicionando propriedades ao objeto
1. var pessoa = {
2. nome: "João",
3. idade: 20,
4. telefone: null,
5. endereco: {
6. logradouro: "Av. Brasil",
7. numero: 70,
8. bairro: "Centro"
9. }
10. };
Atribuindo propriedades a um
objeto
1. pessoa.nome = "João";
2. pessoa["nome"] = "João";
3. pessoa.endereco.bairro = "Centro";
4. pessoa["endereco"]["bairro"] = "Centro";
5. pessoa.endereco["bairro"] = "Centro";
6. pessoa.telefone = null;
7. pessoa.peso = undefined;
Acessando as propriedades de um
objeto
1. pessoa.nome; // "João"
2. pessoa["nome"]; // "João"
3. pessoa.endereco.bairro; // "Centro"
4. pessoa["endereco"]["bairro"]; // "Centro"
5. pessoa.endereco["bairro"]; // "Centro"
6. pessoa.telefone; // null
7. pessoa.peso; // undefined
Apagando propriedades de um
objeto
1. delete pessoa.telefone;
Function
A linguagem JavaScript não tem:
A linguagem JavaScript não tem:
• Classe
A linguagem JavaScript não tem:
• Classe
• Construtor
A linguagem JavaScript não tem:
• Classe
• Construtor
• Método
A linguagem JavaScript não tem:
• Classe
• Construtor
• Método
• Módulo
Mas tem Função!
As funções são responsáveis pelo
poder da linguagem JavaScript
Uma função é um objeto que contém
um bloco de código executável.
Esse bloco é isolado, não sendo
possível acessá-lo externamente
Na linguagem JavaScript, as
funções são de primeira classe
Função de primeira classe é aquela que pode ser
atribuída a uma variável, passada como
parâmetro ou ser retornada de uma outra função.
Criando funções
Function Declaration
1. function soma(a, b) {
2. return a + b;
3. }
Function Expression
1. var soma = function (a, b) {
2. return a + b;
3. }
Named Function Expression
O nome da função pode ser útil pois aparece no stack trace, listas
de breakpoints e demais ferramentas de debbuging
1. var soma = function soma(a, b) {
2. return a + b;
3. }
Qual é a diferença entre function
declaration e expression?
Function Declaration: A função é carregada
antes do código ser interpretado
1. soma(2,2); // 4
2. function soma(a, b) {
3. return a + b;
4. }
Function Expression: A função é carregada
durante a interpretação do código
1. soma(2,2); // soma is not defined
2. var soma = function (a, b) {
3. return a + b;
4. };
Invocando uma função
Invocando uma função diretamente
no escopo global
Invocando uma função diretamente
1. var soma = function (a, b) {
2. return a + b;
3. };
Invocando uma função diretamente
1. var soma = function (a, b) {
2. return a + b;
3. };
4.
5. soma(2, 2); // 4
Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4.
5. var calcularPreco = function (produto, formulaImposto) {
6. return produto.preco + formulaImposto(produto.preco);
7. }
Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4.
5. var calcularPreco = function (produto, formulaImposto) {
6. return produto.preco + formulaImposto(produto.preco);
7. }
8.
9. calcularPreco(produto, formulaImpostoA); // 165
Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4. var formulaImpostoB = function (preco) { return preco*0.2; };
5.
6. var calcularPreco = function (produto, formulaImposto) {
7. return produto.preco + formulaImposto(produto.preco);
8. }
9.
10. calcularPreco(produto, formulaImpostoA); // 165
Passando uma função como parâmetro
1. var produto = {nome: 'Sapato', preco: 150};
2.
3. var formulaImpostoA = function (preco) { return preco*0.1; };
4. var formulaImpostoB = function (preco) { return preco*0.2; };
5.
6. var calcularPreco = function (produto, formulaImposto) {
7. return produto.preco + formulaImposto(produto.preco);
8. }
9.
10. calcularPreco(produto, formulaImpostoA); // 165
11. calcularPreco(produto, formulaImpostoB); // 180
Retornando uma função
1. var helloWorld = function () {
2. return function () {
3. return "Hello World!";
4. };
5. };
Retornando uma função
1. var helloWorld = function () {
2. return function () {
3. return "Hello World!";
4. };
5. };
6.
7. helloWorld(); // [Fuction]
Retornando uma função
1. var helloWorld = function () {
2. return function () {
3. return "Hello World!";
4. };
5. };
6.
7. helloWorld(); // [Fuction]
8. helloWorld()(); // 'Hello World!'
Invocando uma função por meio de
um Objeto
Existem métodos em JavaScript?
Utilizando uma função como método,
declarada dentro do objeto
1. var pessoa = {
2. nome: "João",
3. idade: 20,
4. getIdade: function () {
5. return this.idade;
6. }
7. };
8.
9. pessoa.getIdade(); // 20
Utilizando uma função como método,
declarada dentro do objeto
1. var getIdade = function () {
2. return this.idade;
3. }
4.
5. var pessoa = {
6. nome: "João",
7. idade: 20,
8. getIdade: getIdade
9. };
10.
11. pessoa.getIdade(); // 20
Invocando uma função com
call e apply
call e apply
Toda função possui os métodos call() e apply().
Eles são utilizados para indicar em qual escopo
uma função deve ser executada.
A diferença é basicamente a forma como é utilizado:
função.call(escopo, parametro1, parametro2)
função.apply(escopo, parametros)
Invocando a função com call
1. var getIdade = function () {
2. return this.idade;
3. }
4.
5. var pessoa = {
6. nome: "João",
7. idade: 20,
8. getIdade: getIdade
9. };
10.
11. pessoa.getIdade(); // 20
12. getIdade(); // undefined
13. getIdade.call(pessoa); // 20
Invocando uma função por meio do
operador new
Criando objetos diretamente
1. var pedro = {nome: "Pedro",idade: 20};
Criando objetos diretamente
1. var pedro = {nome: "Pedro",idade: 20};
2. var maria = {nome: "Maria",idade: 30};
Criando objetos com uma função
fábrica
1. var criarPessoa = function (nome, idade) {
2. return {
3. nome: nome,
4. idade: idade
5. };
6. }
7.
8. var pedro = criarPessoa("Pedro", 20);
Criando objetos com uma função
construtora
1. var Pessoa = function (nome, idade) {
2. this.nome = nome;
3. this.idade = idade;
4. }
5.
6. var pedro = new Pessoa("Pedro", 20);
Não esqueça de utilizar o operador new
quando utilizar funções construtoras
Closures
Criando uma função simples
1. var helloWorld = function () {
2. return "Hello World!";
3. };
4.
5. helloWorld; // [Function]
6. helloWorld(); // 'Hello World!'
Retornando uma função dentro de
outra função
1. var helloWorld = function () {
2. var message = "Hello World!";
3. return function () {
4. return message;
5. };
6. };
7.
8. helloWorld; // [Function]
9. helloWorld(); // [Function]
Retornando uma função dentro de
outra função
1. var helloWorld = function () {
2. var message = "Hello World!";
3. return function () {
4. return message;
5. };
6. };
7.
8. helloWorld; // [Function]
9. helloWorld(); // [Function]
10. helloWorld()(); // 'Hello World!'
Escrevendo código reusável por meio
de funções fábrica e construtora
O poder da orientação a objetos
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. };
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. };
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. return filme.diaria * dias;
4. };
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. return filme.diaria * dias;
4. };
5.
6. var duroDeMatar = {
7. titulo: "Duro de Matar",
8. genero: "Ação",
9. diaria: 5
10. };
11. var dataAluguel = new Date(2010, 2, 1);
12. var dataDevolucao = new Date(2010, 2, 3);
13. calcularLocacao(duroDeMatar, dataAluguel, dataDevolucao); // 10
E se eu quiser reusar aquele trecho
de código em outro lugar?
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. return filme.diaria * dias;
4. };
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. return filme.diaria * dias;
4. };
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. var dias =
3. return filme.diaria * dias;
4. };
1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
2. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
3. return filme.diaria * dias;
4. };
1. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
2. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. };
4. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
5. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
6. return filme.diaria * dias;
7. };
1. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
2. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. };
4. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
5. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
6. return filme.diaria * dias;
7. };
Podemos distribuir o código por meio de um
objeto utilizando uma função fábrica
1. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
2. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
3. };
4. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
5. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
6. return filme.diaria * dias;
7. };
1. var criarPeriodo = function (inicio, fim) {
2. };
3.
4. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
5. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
6. };
7.
8. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
9. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
10. return filme.diaria * dias;
11. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. };
4. };
5.
6. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
7. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
8. };
9.
10. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
11. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
12. return filme.diaria * dias;
13. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. };
5. };
6.
7. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
8. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
13. return filme.diaria * dias;
14. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. };
6. };
7.
8. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
9. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
10. };
11.
12. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
13. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
14. return filme.diaria * dias;
15. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
12. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
13. };
14.
15. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
16. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
17. return filme.diaria * dias;
18. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) {
12. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24);
13. };
14.
15. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
16. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
17. return filme.diaria * dias;
18. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
13. return filme.diaria * dias;
14. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao);
13. return filme.diaria * dias;
14. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12.
13. return filme.diaria * dias;
14. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var periodo = criarPeriodo(dataAluguel, dataDevolucao);
13. return filme.diaria * dias;
14. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var periodo = criarPeriodo(dataAluguel, dataDevolucao);
13. var dias = periodo.calcularDiferencaEmDias();
14. return filme.diaria * dias;
15. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) {
12. var periodo = criarPeriodo(dataAluguel, dataDevolucao);
13. var dias = periodo.calcularDiferencaEmDias();
14. return filme.diaria * dias;
15. };
A linguagem não possui nenhum tipo de
modificador de visibilidade, sendo assim será
necessário recorrer a outra estratégia para
encapsular propriedades de objetos
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var inicio = new Date(2010, 3, 1);
12. var fim = new Date(2010, 3, 3);
13. var periodo = criarPeriodo(inicio, fim);
14. periodo.inicio; // Thu Apr 01 2010 00:00:00 GMT-0300 (BRT)
15. periodo.fim; // Sat Apr 03 2010 00:00:00 GMT-0300 (BRT)
16. periodo.calcularDiferencaEmDias(); // 2
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
10.
11. var inicio = new Date(2010, 3, 1);
12. var fim = new Date(2010, 3, 3);
13. var periodo = criarPeriodo(inicio, fim);
14. periodo.inicio; // Thu Apr 01 2010 00:00:00 GMT-0300 (BRT)
15. periodo.fim; // Sat Apr 03 2010 00:00:00 GMT-0300 (BRT)
16. periodo.calcularDiferencaEmDias(); // 2
17. periodo.inicio = new Date(2010, 3, 13);
18. periodo.calcularDiferencaEmDias(); // -10
Se lembra da closure?
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. inicio: inicio,
4. fim: fim,
5. calcularDiferencaEmDias: function () {
6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
7. }
8. };
9. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: function () {
4. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
5. }
6. };
7. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: function () {
4. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24);
5. }
6. };
7. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: function () {
4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
5. }
6. };
7. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: function () {
4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
5. }
6. };
7. };
8. var inicio = new Date(2010, 3, 1);
9. var fim = new Date(2010, 3, 3);
10. var periodo = criarPeriodo(inicio, fim);
11. periodo.inicio; // undefined
12. periodo.fim; // undefined
13. periodo.calcularDiferencaEmDias(); // 2
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: function () {
4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
5. }
6. };
7. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: function () {
4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
5. }
6. };
7. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias:
4. };
5. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: _calcularDiferencaEmDias
4. };
5. };
1. var criarPeriodo = function (inicio, fim) {
2. return {
3. calcularDiferencaEmDias: _calcularDiferencaEmDias
4. };
5. };
1. var criarPeriodo = function (inicio, fim) {
2. var _calcularDiferencaEmDias = function () {
3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
4. };
5. return {
6. calcularDiferencaEmDias: _calcularDiferencaEmDias
7. };
8. };
1. var criarPeriodo = function (inicio, fim) {
2. var _calcularDiferencaEmDias = function () {
3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
4. };
5. return {
6. calcularDiferencaEmDias: _calcularDiferencaEmDias
7. };
8. };
1. var criarPeriodo = function (inicio, fim) {
2. var _calcularDiferencaEmDias = function () {
3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
4. };
5. return {
6. calcularDiferencaEmDias: _calcularDiferencaEmDias
7. };
8. };
9.
10. var inicio = new Date(2010, 3, 1);
11. var fim = new Date(2010, 3, 3);
12. var periodo = criarPeriodo(inicio, fim);
13. periodo.inicio; // undefined
14. periodo.fim; // undefined
15. periodo.calcularDiferencaEmDias(); // 2
Também é possível utilizar uma
função construtora
1. var Periodo = function (inicio, fim) {
2. };
1. var Periodo = function (inicio, fim) {
2. this.calcularDiferencaEmDias = function () {
3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
4. };
5. };
1. var Periodo = function (inicio, fim) {
2. this.calcularDiferencaEmDias = function () {
3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
4. };
5. };
1. var Periodo = function (inicio, fim) {
2. this.calcularDiferencaEmDias = function () {
3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24);
4. };
5. };
6.
7. var inicio = new Date(2010, 3, 1);
8. var fim = new Date(2010, 3, 3);
9. var periodo = new Periodo(inicio, fim);
10. periodo.inicio; // undefined
11. periodo.fim; // undefined
12. periodo.calcularDiferencaEmDias(); // 2
Array
Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Não existem Arrays de verdade na
linguagem JavaScript
Os Arrays são apenas objetos especiais
que oferecem meios para acessar e
manipular suas propriedades por
meio de índices.
Criando um Array com []
1. var carros = [];
Inserindo elementos no Array
1. var carros = [];
2.
3. a[0] = "Ka";
Inserindo elementos no Array
1. var carros = [];
2.
3. a[0] = "Ka";
4. a[1] = "Corsa";
Inserindo elementos no Array
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[3] = "Palio";
Também é possível criar um Array
inicializado com elementos
1. var carros = ["Ka", "Corsa", "Palio"];
Criando um Array com new Array()
1. var carros = new Array();
Criando um Array com new Array()
1. var carros = new Array();
Inicializando o Array com elementos
1. var carros = new Array("Ka", "Corsa", "Palio");
Também é possível inicializar o
Array, com um tamanho inicial
1. var carros = new Array(10);
Não se esqueça que o Array não tem
tamanho fixo e o tamanho inicial é
apenas uma forma de inicializá-lo
Array API
• concat – Junta dois arrays, retornando a cópia dos dois
• every – Retorna true se todos os elementos atenderem a função
• filter – Filtra o array com base em uma função de filtro
• forEach – Percorre o array, invocando uma função para cada elemento
• indexOf – Retorna o índice do primeiro elemento encontrado
• join – Cria uma String customizada com todos os elementos do array
• lastIndexOf – Retorna o índice do último elemento encontrado
• map – Trasforma os elementos de um array
• pop – Remove o último elemento do array, retornando-o
• push – Adiciona um elemento no array, retornando o length
• reduce – Acumula os elementos de um array
• reverse – Inverte a ordem dos elementos do array
• shift - Remove o primeiro elemento do array, retornando-o
• some – Retorna true se um dos elementos atender a função
• slice - Seleciona uma parte do array, retornando-a
• sort - Ordena os elementos do array com base em uma função
• splice - Adiciona ou remove elementos de uma posição específica
• toString – Converte o array em uma String
• unshift – Adiciona elementos no início do array
• valueOf – Retorna o próprio array
Retornando o Array com valueOf
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.valueOf(); // ["Ka", "Corsa", "Palio"]
Visualizando o Array com toString
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.toString(); // ["Ka", "Corsa", "Palio"]
Consultando o tamanho do Array
com length
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.length; // 3
Inserindo novos elementos no final
com push
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.push("Gol"); // 4
8.
9. carros.toString(); // ["Ka", "Corsa", "Palio", "Gol"]
Retirando elementos do final
com pop
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.pop(); // "Palio"
8.
9. carros.toString(); // ["Ka", "Corsa"]
Inserindo novos elementos no início
com unshift
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.unshift("Gol"); // 4
8.
9. carros.toString(); // ["Gol", "Ka", "Corsa", "Palio"]
Retirando elementos do início
com shift
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.shift(); // "Ka"
8.
9. carros.toString(); // ["Corsa", "Palio"]
Localizando elementos com indexOf
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.indexOf("Corsa"); // 1
Removendo elementos em uma
posição com splice
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. var pos = carros.indexOf("Corsa"); // 1
8.
9. carros.splice(pos, 1); // ["Corsa"]
10.
11. carros.toString(); // ["Ka", "Palio"]
Substituindo elementos em uma
posição com splice
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. var pos = carros.indexOf("Corsa"); // 1
8.
9. carros.splice(pos, 1, "Sonic"); // ["Corsa"]
10.
11. carros.toString(); // ["Ka", "Sonic", "Palio"]
Adicionando elementos em uma
posição com splice
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. var pos = carros.indexOf("Corsa"); // 1
8.
9. carros.splice(pos, 0, "Sonic"); // []
10.
11. carros.toString(); // ["Ka", "Sonic", "Corsa", "Palio"]
Iterando em um Array com forEach
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6.
7. carros.forEach(function (elemento) {
8. // lógica de iteração
9. });
Filtrando o Array com filter
1. var carros = [];
2.
3. carros[0] = {marca: "Ford", modelo: "Ka"};
4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"};
5. carros[2] = {marca: "Fiat", modelo: "Palio"};
6.
7. carros.filter(function (elemento) {
8. return elemento.marca === "Ford";
9. });
10. // [{marca: "Ford", modelo: "Ka"}]
Testando os elementos do Array
com every
1. var carros = [];
2.
3. carros[0] = {marca: "Ford", modelo: "Ka"};
4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"};
5. carros[2] = {marca: "Fiat", modelo: "Palio"};
6.
7. carros.every(function (elemento) {
8. return elemento.marca === "Ford";
9. });
10. // false
Testando os elementos do Array
com some
1. var carros = [];
2.
3. carros[0] = {marca: "Ford", modelo: "Ka"};
4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"};
5. carros[2] = {marca: "Fiat", modelo: "Palio"};
6.
7. carros.some(function (elemento) {
8. return elemento.marca === "Ford";
9. });
10. // true
Mapeando os elementos do Array
com map
1. var carros = [];
2.
3. carros[0] = {marca: "Ford", modelo: "Ka"};
4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"};
5. carros[2] = {marca: "Fiat", modelo: "Palio"};
6.
7. carros.map(function (elemento) {
8. return elemento.marca;
9. });
10. // ["Ford", "Chevrolet", "Fiat"]
Processando os elementos do Array
com reduce
1. var carros = [];
2.
3. carros[0] = {modelo: "Ka", preco: 28800};
4. carros[1] = {modelo: "Corsa", preco: 34750};
5. carros[2] = {modelo: "Palio", preco: 32000};
6.
7. carros.reduce(function (prev, cur) {
8. return prev + cur.preco;
9. }, 0);
10. // 95550
Concatenando dois Arrays
com concat
1. var carros = ["Ka", "Corsa", "Palio"];
2. var motos = ["Honda", "Yamaha"];
3.
4. var veiculos = carros.concat(motos);
5.
6. veiculos.toString(); // ["Ka", "Corsa", "Palio",
"Honda", "Yamaha"]
Fatiando um Array com slice
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6. carros[3] = "Gol";
7.
8. carros.slice(0,2); // ["Ka", "Corsa"]
9. carros.slice(1,3); // ["Corsa", "Palio"]
10. carros.slice(2); // ["Palio", "Gol"]
Invertendo a ordem de um Array
com reverse
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6. carros[3] = "Gol";
7.
8. carros.reverse();
9.
10. carros.toString(); // ["Gol", "Palio", "Corsa", "Ka"]
Ordenando os elementos de um
Array com sort
1. var carros = [];
2.
3. carros[0] = {modelo: "Ka", preco: 28800};
4. carros[1] = {modelo: "Corsa", preco: 34750};
5. carros[2] = {modelo: "Palio", preco: 32000};
6.
7. carros.sort(function (a, b) {
8. return a.preco - b.preco;
9. });
10.
11. carros.valueOf(); // ["Ka", "Palio", "Corsa"]
Juntando os elementos um Array
com join
1. var carros = [];
2.
3. carros[0] = "Ka";
4. carros[1] = "Corsa";
5. carros[2] = "Palio";
6. carros[3] = "Gol";
7.
8. carros.join(";"); // "Ka;Corsa;Palio;Gol"
Expressões Regulares
Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
As expressões regulares são estruturas
formadas por uma sequência de caracteres
que especificam um padrão formal
Validação de campos
Extração de dados
Substituição de caracteres em textos
Criando uma expressão regular
1. var regExp = /<expressão regular>/;
Criando uma expressão regular
1. var regExp = new RegExp("<expressão regular>");
RegExp API
exec – Executa a RegExp, retornando os
detalhes
test – Testa a RegExp, retornando true
ou false
Telefone – Passo 1
Nosso primeiro exemplo envolve o reconhecimento de
um telefone simples: 9999-9999. Esse telefone será
evoluído por meio de novos cenários para estimular a
utilização de grupos, metacaracteres, quantificadores e
muito mais!
Executando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.exec(telefone); // ['9999-9999', index: 0,
input: '9999-9999']
Testando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.test(telefone); // true
Telefone – Passo 2
Evoluímos nosso primeiro exemplo e agora o telefone
tem código de área: (48) 9999-9999, como fazer para
reconhecê-lo?
Testando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.test(telefone); // true
Testando a expressão regular
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // false
Escapando caracteres especiais
 - A barra é utilizada antes de
caracteres especiais, com o objetivo de
escapá-los.
Escapando caracteres especiais
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // false
Escapando caracteres especiais
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true
Telefone – Passo 3
Vamos evoluir novamente e agora, no nosso terceiro
exemplo, temos que fazer com que o telefone seja
reconhecido únicamente, não permitindo outros
caracteres antes e depois!
Iniciando e finalizando com um
determinado caractere
^ - Inicia com um determinado caractere
$ - Finaliza com um determinado
caractere
Lidando com caracteres antes e depois
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "Ligue para (90) 9999-9999, tratar com
João";
4. regExp.test(telefone); // true
Lidando com caracteres antes e depois
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "Ligue para (90) 9999-9999, tratar com
João";
4. regExp.test(telefone); // false
Lidando com caracteres antes e depois
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true
Telefone – Passo 4
Chegou a hora de aceitar qualquer número de telefone,
para isso precisamos flexibilizar a expressão regular por
meio de grupos.
Grupos de caracteres
[abc] – Aceita qualquer caractere
dentro do grupo, nesse caso a, b e c
[^abc] – Não aceita qualquer caractere
dentro do grupo, nesse caso a, b ou c
[0-9] – Aceita qualquer caractere
entre 0 e 9
[^0-9] – Não aceita qualquer caractere
entre 0 e 9
Utilizando grupos de caracteres
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true
Utilizando grupos de caracteres
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // false
Utilizando grupos de caracteres
1. var regExp = /^([0-9][0-9]) [0-9][0-9][0-9][0-9]-[0-
9][0-9][0-9][0-9]$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
Telefone – Passo 5
Não é muito grupo? Para evitar a repetição exagerada
de padrões em uma expressão regular, podemos
utilizar quantificadores.
Quantificadores – Parte 1
Os quantificadores podem ser aplicados a caracteres,
grupos, conjuntos ou metacaracteres.
{n} – Quantifica um número específico
{n,} – Quantifica um número mínimo
{n,m} – Quantifica um número mínimo e
um número máximo
Utilizando quantificadores
1. var regExp = /^([0-9][0-9]) [0-9][0-9][0-9][0-9]-[0-
9][0-9][0-9][0-9]$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
Telefone – Passo 6
E se for necessário aceitar números com 8 ou 9 dígitos?
Podemos utilizar um quantificador para especificar um
determinado intervalo.
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // false
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // true
Telefone – Passo 7
E se o hífen for opcional? É muito comum que se
escreva sem hífen! Podemos utilizar um quantificador
para torná-lo opcional.
Quantificadores - Parte 2
Os quantificadores podem ser aplicados a caracteres,
grupos, conjuntos ou metacaracteres.
? – Zero ou um
* – Zero ou mais
+ – Um ou mais
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // true
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // false
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // true
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // true
Telefone – Passo 8
E se o telefone agora estiver em uma estrutura de
tabela, como fazer para reconhecer cada linha?
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. regExp.test(telefone); // false
Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. regExp.test(telefone); // false
Utilizando quantificadores
1. var regExp = /([0-9]{2}) [0-9]{4,5}-?[0-9]{4}/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. regExp.test(telefone); // false
Utilizando quantificadores
1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}-
?[0-9]{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. regExp.test(telefone); // true
Telefone – Passo 9
Em muitos casos, é possível substituir os grupos por
metacaracteres específicos!
Metacaracteres
. – Representa qualquer caractere
w – Representa o conjunto [a-zA-Z0-9_]
W – Representa o conjunto [^a-zA-Z0-9_]
d – Representa o conjunto [0-9]
D – Representa o conjunto [^0-9]
s – Representa um espaço em branco
S – Representa um não espaço em branco
n – Representa uma quebra de linha
t – Representa um tab
Utilizando metacaracteres
1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}-
?[0-9]{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. regExp.test(telefone); // true
Utilizando metacaracteres
1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}-
?[0-9]{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. regExp.test(telefone); // true
Utilizando metacaracteres
1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}-
?d{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. regExp.test(telefone); // true
String API
match – Executa uma busca na String e retorna
um array contendo os dados encontrados, ou
null.
split – Divide a String com base em uma outra
String fixa ou expressão regular.
replace – Substitui partes da String com bae
em uma outra String fixa ou expressão regular.
Telefone – Passo 10
Chegou a hora de extrair os telefones das linhas da
tabela! Vamos extrair o telefone da primeira linha.
Extraindo dados com match
1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}-
?d{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // null
Extraindo dados com match
1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}-
?d{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // null
Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // '(80) 999778899'
Telefone – Passo 11
Agora, vamos extrair o telefone de todas as linhas.
Modificadores
i – Case-insensitive matching
g – Global matching
m – Multiline matching
Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // '(80) 999778899'
Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/g;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // ['(80) 999778899', '(90)
99897-8877', '(70) 98767-9999']
Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/g;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // ['(80) 999778899', '(90)
99897-8877', '(70) 98767-9999']
Extraindo dados com match
1. var regExp = /(d{2}) /g;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // ['(80)', '(90)', '(70)']
Extraindo dados com match
1. var regExp = /d{4,5}-?d{4}/g;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // ['999778899', '99897-
8877', '98767-9999']
Telefone – Passo 12
Por fim, vamos substituir todos os telefones da tabela!
Substituindo dados com replace
1. var regExp = /(d{2})sd{4,5}-?d{4}/g;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.replace(regExp, "telefone"); // <table><tr>
11. <td>telefone</td><td>telefone</td><td>telefone...
Date
Criando um Date
1. var a = new Date(); // Data Atual
2. var b = new Date("2002/10/10"); // Thu Oct 10 2002 00:00:00
3. var c = new Date(2000, 0, 1); // Sat Jan 01 2000 00:00:00
4. var d = new Date(1410480553258);
Date API
• getDate – Retorna o dia
• getDay - Retorna o dia da semana
• getFullYear – Retorna o ano
• getHours – Retorna as horas
• getMilliseconds – Retorna os milisegundos
• getMinutes – Retorna os minutos
• getMonth – Retorna o mês
• getSeconds – Retorna os segundos
• getTime – Retorna o tempo em milisegundos
• toString - Retorna a data em String
Estruturas Condicionais e de
Repetição
Estruturas
As estruturas condicionais e de repetição da
linguagem JavaScript tem a sintaxe
bastante similar a linguagem Java. Além
dos clássicos if/else, for, while e switch,
temos o for/in que serve para fazer
introspecção nas propriedades de um
determinado objeto
if/else
1. var a = 10;
2. if (a == 10) {
3. console.log("AgileCode");
4. } else {
5. console.log("JavaScript");
6. }
7.
8. // AgileCode
for
1. var items = ['Radio', 'Shock', 'Window'];
2. for (var i = 0; i < items.length; i++) {
3. console.log(items[i]);
4. }
5.
6. // Radio
7. // Shock
8. // Window
while
1. var items = ['Radio', 'Shock', 'Window'];
2. var a = 0;
3. while(a < items.length) {
4. console.log(items[a]);
5. a++;
6. }
7.
8. // Radio
9. // Shock
10. // Window
for/in
1. var person = {name:'John', age: 20};
2. for (var x in person) {
3. if(!person.hasOwnProperty(x)) continue;
4. console.log(x + " - " + person[x]);
5. }
6.
7. // name – John
8. // age - 20
switch
1. var a = 0;
2. switch(a) {
3. case 0:
4. console.log('Bloco 0');
5. break;
6. case 1:
7. console.log('Bloco 1');
8. break;
9. }
10.
11. // Bloco 0
Operadores
Operadores
Os operadores são divididos em
aritméticos, atribuição, comparação,
lógica e ternário. Assim como as
estruturas condicionais e de repetição,
são bem similares aos da linguagem Java
Aritméticos
1. var y = 10;
2.
3. x = y + 2; // 12
4. x = y - 2; // 8
5. x = y * 2; // 20
6. x = y / 2; // 5
7. x = y % 2; // 0
8. x = ++y; // 11
9. x = y++; // 10
10. x = --y; // 9
11. x = y--; // 10
Atribuição
1. var x = 10;
2. var y = 2;
3.
4. x += y; // 12
5. x -= y; // 8
6. x *= y; // 20
7. x /= y; // 5
8. x %= y; // 0
Comparação
1. var x = 10;
2.
3. x == 10; // true
4. x != 10; // false
5. x === 10; // true
6. x !== 10; // false
7. x > 0; // true
8. x < 100; // true
9. x >=10; // true
10. x <=0; // false
Lógica
1. (1 & 3); // 1
2. (1 | 2); // 3
3. (true && true); // true
4. (10 && 100); // 100
5. (true || false); // true
6. (10 || 0); // 10
7. !(x == y); // true
8. !!(x); // true
Ternário
1. var idade = 20;
2. var situacao = (idade > 18) ? "Maior" : "Menor"; // "Maior"
Tratamento de erros
Tratamento de erros
O tratamento de erros é feito por meio do
lançamento e captura de objetos de erro,
utilizando as palavras reservadas throw,
try e catch
Ao lançar um erro, o fluxo de execução é
interrompido até alcançar um bloco try e catch,
onde o erro será tratado
O que é um erro?
Apesar de ser possível lançar qualquer tipo
de dado, é recomendado que sejam
lançados apenas objetos contendo nome e
a mensagem de erro
var erro = {
name: "Nome do erro",
message: "Descrição do erro"
}
Criando um erro
1. var illegalArgumentError = function (message) {
2. return {
3. name: "IllegalArgumentError",
4. message: message
5. };
6. };
Lançando os erros
1. var illegalArgumentError = function (message) {
2. return {
3. name: "IllegalArgumentError",
4. message: message
5. };
6. };
7. var calcularDesconto = function (quantidade, valor) {
8. if (quantidade === 0) throw illegalArgumentError ("Quantidade zero");
9. if (valor < 0) throw illegalArgumentError("Valor negativo");
10. // Código de cálculo do desconto
11. };
Tratando os erros
1. var illegalArgumentError = function (message) {
2. return {
3. name: "IllegalArgumentError",
4. message: message
5. };
6. };
7. var calcularDesconto = function (quantidade, valor) {
8. if (quantidade === 0) throw illegalArgumentError ("Quantidade zero");
9. if (valor < 0) throw illegalArgumentError("Valor negativo");
10. // Código de cálculo do desconto
11. };
12. try {
13. calcularDesconto(0, 100);
14. } catch (e) {
15. console.log(e.message);
16. }
Testes
Herança
Herança
A herança é utilizada principalmente para
promover o reuso. Em JavaScript, ela é feita
com base em protótipos, não em classes,
como em outras linguagens. Isso se deve a
suas raízes na linguagem Self.
1. var pessoa1 = {
2. nome: "João",
3. idade: 20,
4. toString: function () {
5. return this.nome + " tem " + this.idade + " anos";
6. }
7. };
1. var pessoa1 = {
2. nome: "João",
3. idade: 20,
4. toString: function () {
5. return this.nome + " tem " + this.idade + " anos";
6. }
7. };
8.
9. pessoa1.toString(); // João tem 20 anos
1. var pessoa1 = {
2. nome: "João",
3. idade: 20,
4. toString: function () {
5. return this.nome + " tem " + this.idade + " anos";
6. }
7. };
8.
9. var pessoa2 = {
10. nome: "Pedro",
11. idade: 16,
12. toString: function () {
13. return this.nome + " tem " + this.idade + " anos";
14. }
15. };
16.
17. pessoa1.toString(); // João tem 20 anos
1. var pessoa1 = {
2. nome: "João",
3. idade: 20,
4. toString: function () {
5. return this.nome + " tem " + this.idade + " anos";
6. }
7. };
8.
9. var pessoa2 = {
10. nome: "Pedro",
11. idade: 16,
12. toString: function () {
13. return this.nome + " tem " + this.idade + " anos";
14. }
15. };
16.
17. pessoa1.toString(); // João tem 20 anos
18. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa1 = {
2. nome: "João",
3. idade: 20,
4. toString: function () {
5. return this.nome + " tem " + this.idade + " anos";
6. }
7. };
8.
9. var pessoa2 = {
10. nome: "Pedro",
11. idade: 16,
12. toString: function () {
13. return this.nome + " tem " + this.idade + " anos";
14. }
15. };
16.
17. pessoa1.toString(); // João tem 20 anos
18. pessoa2.toString(); // Pedro tem 16 anos
1.
2. pessoa1.toString(); // João tem 20 anos
3. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. pessoa1.toString(); // João tem 20 anos
8. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8. pessoa1.nome = "João";
9. pessoa1.idade = 20;
10.
11. pessoa1.toString(); // João tem 20 anos
12. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8. pessoa1.nome = "João";
9. pessoa1.idade = 20;
10.
11. var pessoa2 = Object.create(pessoa);
12. pessoa2.nome = "Pedro";
13. pessoa2.idade = 16;
14.
15. pessoa1.toString(); // João tem 20 anos
16. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8. pessoa1.nome = "João";
9. pessoa1.idade = 20;
10.
11. var pessoa2 = Object.create(pessoa);
12. pessoa2.nome = "Pedro";
13. pessoa2.idade = 16;
14.
15. pessoa1.toString(); // João tem 20 anos
16. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. toString: function () {
3. return this.nome + " tem " + this.idade + " anos";
4. }
5. };
6.
7. var pessoa1 = Object.create(pessoa);
8.
9. var pessoa2 = Object.create(pessoa);
10.
11. pessoa1.toString(); // João tem 20 anos
12. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. constructor: function () {
3. },
4. toString: function () {
5. return this.nome + " tem " + this.idade + " anos";
6. }
7. };
8.
9. var pessoa1 = Object.create(pessoa);
10.
11. var pessoa2 = Object.create(pessoa);
12.
13. pessoa1.toString(); // João tem 20 anos
14. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var pessoa1 = Object.create(pessoa);
12.
13. var pessoa2 = Object.create(pessoa);
14.
15. pessoa1.toString(); // João tem 20 anos
16. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var pessoa1 = Object.create(pessoa);
12. pessoa1.constructor("João", 20);
13.
14. var pessoa2 = Object.create(pessoa);
15. pessoa2.constructor("Pedro", 16);
16.
17. pessoa1.toString(); // João tem 20 anos
18. pessoa2.toString(); // Pedro tem 16 anos
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return this.nome + " tem " + this.idade + " anos e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return this.nome + " tem " + this.idade + " anos e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13.
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return pessoa.toString() + " e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // undefined tem undefined anos e é funcionário
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return pessoa.toString.call(this) + " e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
1. var pessoa = {
2. constructor: function (nome, idade) {
3. this.nome = nome;
4. this.idade = idade;
5. },
6. toString: function () {
7. return this.nome + " tem " + this.idade + " anos";
8. }
9. };
10.
11. var funcionario = Object.create(pessoa);
12. funcionario.toString = function () {
13. return pessoa.toString.call(this) + " e é funcionário";
14. };
15.
16. var pessoa1 = Object.create(pessoa);
17. pessoa1.constructor("João", 20);
18.
19. var pessoa2 = Object.create(funcionario);
20. pessoa2.constructor("Pedro", 16);
21.
22. pessoa1.toString(); // João tem 20 anos
23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
JSON
JavaScript Object Notation
use strict
O Strict Mode foi introduzido na versão 5 do
ECMAScript e quando habilitado torna o
inerpretador mais exigente, lançando erros
em determinadas situações, que antes não
eram lançados. Podemos aplicá-lo a todo o
script, ou a uma função específica.
1. "use strict";
2. nome = "João"; // name is not defined
1. "use strict";
2. var pessoa= {nome: "João", nome: "João"}; // Duplicate data
property in object literal not allowed in strict mode
1. "use strict";
2. a + b + c; // a is not defined
O que a linguagem tem de ruim?
Variáveis globais
Para que servem as variáveis
globais na linguagem JavaScript?
Como a linguagem não possui um ligador,
ou linker, faz uso de variáveis globais para
estabelecer vínculos entre os diferentes
artefatos partencentes a uma aplicação
O grande problema com as
variáveis globais é a poluição
NaN (Not a Number)
Caso ocorra algum problema em uma
conversão ou operação matemática, o
valor NaN, que significa not a number, é
retornado sem qualquer outra notificação
do que pode ter ocorrido
typeof
A linguagem produz alguns resultados
estranhos ao ser questionada sobre alguns
tipos como null, RegExp e NaN
var a = null;
typeof a; // 'object'
var b = NaN;
typeof b; // 'number'
var c = /./;
typeof c; // 'object'
var d = [1, 2, 3, 4, 5 ,6];
typeof d; // 'object'
Valores truthy e falsy
Infelizmente, a linguagem assume o
estado de determinados tipos como true
ou false, sem existir uma estratégia
consistente para dar suporte a decisão
0 // false
NaN // false
'' // false
false // false
null // false
undefined // false
Operadores de comparação
O comportamento dos operadores == e !=
apresenta problemas relacionados a
coersão de tipos, produzindo resultados
indesejados
> '' == '0'
false
> '' == '0'
false
> '' == 0
true
> '' == '0'
false
> '' == 0
true
> 0 == '0'
true
> '' == '0'
false
> '' == 0
true
> 0 == '0'
true
> false == undefined
false
> '' == '0'
false
> '' == 0
true
> 0 == '0'
true
> false == undefined
false
> false == null
false
> '' == '0'
false
> '' == 0
true
> 0 == '0'
true
> false == undefined
false
> false == null
false
> null == undefined
true
> '' == '0'
false
> '' == 0
true
> 0 == '0'
true
> false == undefined
false
> false == null
false
> null == undefined
true
> NaN == null
false
> '' == '0'
false
> '' == 0
true
> 0 == '0'
true
> false == undefined
false
> false == null
false
> null == undefined
true
> NaN == null
false
> NaN == NaN
false
Utilize apenas os operadores
=== e !==
Operações com ponto flutuante
A linguagem possui apenas um tipo de
número, 64-bit floating point. Operações
simples como soma e substração podem
ter resultados indesejados
0.1 + 0.2 = 0.30000000000000004
Inserção automática de ;
Apesar de parecer uma vantagem, a
inserção automática de ; pode trazer
inúmeros problemas semânticos
Qual é a diferença entre os trechos de
código abaixo:
return
{
status: true
};
return {
status: true
};
Palavras reservadas não utilizadas
Existem muitas palavras reservadas,
algumas delas vindas da linguagem Java,
e a maior parte delas não são utilizadas:
abstract boolean break byte case catch char class const continue
debugger default delete do double else enum export extends false final
finally float for function goto if implements import in instanceof int
interface long native new null package private protected public return
short static super switch synchronized this throw throws transient true
try typeof var volatile void while with
var method; // ok
var class; // illegal
object = {box: value}; // ok
object = {case: value}; // illegal
object = {'case': value}; // ok
object.box = value; // ok
object.case = value; // illegal
object['case'] = value; // ok
Escopo de declaração
Apesar da sintaxe semelhante ao Java, ao
escrever um bloco, como em uma
estrutura de decisão, o escopo de
declaração não é isolado
Qual é o resultado do código abaixo?
var a = true;
if (a) {
var x = "Hello World";
}
console.log(a); // true
console.log(x); // "Hello World";
Evite utilizar a função eval
Mitos e Lendas
JavaScript faz parte ou tem qualquer
relação com a linguagem Java
JavaScript faz parte ou tem qualquer
relação com a linguagem Java
JavaScript é uma linguagem considerada
inferior e não deve ser utilizada em
aplicações profissionais
JavaScript é uma linguagem considerada
inferior e não deve ser utilizada em
aplicações profissionais
JavaScript só pode ser utilizada dentro de
um browser
JavaScript só pode ser utilizada dentro de
um browser
A linguagem tem diversos problemas e se
comporta de forma diferente dependendo
do browser
A linguagem tem diversos problemas e se
comporta de forma diferente dependendo
do browser
JavaScript não é orientado a objetos como
outras linguagens
JavaScript não é orientado a objetos como
outras linguagens
Declaração comentada
Muito comum e utilizada em 1996
1. <html>
2. <head>
3. <script>
4. <!-- function somar(a, b) {
5. return a + b;
6. } -->
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
Declaração comentada
Muito comum e utilizada em 1996
1. <html>
2. <head>
3. <script>
4. <!-- function somar(a, b) {
5. return a + b;
6. } -->
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
Atributo language
Utilizado em uma época em que existiam outros
dialetos como o vbscript
1. <html>
2. <head>
3. <script language="javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
Atributo language
Utilizado em uma época em que existiam outros
dialetos como o vbscript
1. <html>
2. <head>
3. <script language="javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
Atributo type
Definição do tipo do formato do script
1. <html>
2. <head>
3. <script type="text/javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
Atributo type
Definição do tipo do formato do script
1. <html>
2. <head>
3. <script type="text/javascript">
4. function somar(a, b) {
5. return a + b;
6. }
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
Local da declaração
Qual é o melhor lugar para declarar os scripts?
1. <html>
2. <head>
3. </head>
4. <body>
5. <script src="script.js" type="text/javascript"></script>
6. </body>
7. </html>
Local da declaração
Qual é o melhor lugar para declarar os scripts?
1. <html>
2. <head>
3. </head>
4. <body>
5. <script src="script.js" type="text/javascript"></script>
6. </body>
7. </html>

Mais conteúdo relacionado

Mais procurados

Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosFabio Moura Pereira
 
Algoritmos e Estrutura de Dados - Aula 01
Algoritmos e Estrutura de Dados - Aula 01Algoritmos e Estrutura de Dados - Aula 01
Algoritmos e Estrutura de Dados - Aula 01thomasdacosta
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptPablo Sanches
 
Aula 1 - Introdução a Engenharia de Software
Aula 1 -  Introdução a Engenharia de SoftwareAula 1 -  Introdução a Engenharia de Software
Aula 1 - Introdução a Engenharia de SoftwareLeinylson Fontinele
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Javascript (parte 1)
Javascript (parte 1)Javascript (parte 1)
Javascript (parte 1)Alex Camargo
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAndré Constantino da Silva
 
Javascript Orientado a Objeto
Javascript Orientado a ObjetoJavascript Orientado a Objeto
Javascript Orientado a ObjetoFábio Elísio
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front endandreluizlc
 
Aula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e ProgramaçãoAula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e ProgramaçãoAislan Rafael
 
Apostila de Fundamentos Java
Apostila de Fundamentos JavaApostila de Fundamentos Java
Apostila de Fundamentos JavaMarcio Marinho
 

Mais procurados (20)

Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
 
Algoritmos e Estrutura de Dados - Aula 01
Algoritmos e Estrutura de Dados - Aula 01Algoritmos e Estrutura de Dados - Aula 01
Algoritmos e Estrutura de Dados - Aula 01
 
Introdução ao JavaScript
Introdução ao JavaScriptIntrodução ao JavaScript
Introdução ao JavaScript
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Linguagem C - Vetores
Linguagem C - VetoresLinguagem C - Vetores
Linguagem C - Vetores
 
Aula 1 - Introdução a Engenharia de Software
Aula 1 -  Introdução a Engenharia de SoftwareAula 1 -  Introdução a Engenharia de Software
Aula 1 - Introdução a Engenharia de Software
 
Aula01 - Logica de Programação
Aula01 - Logica de ProgramaçãoAula01 - Logica de Programação
Aula01 - Logica de Programação
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Javascript (parte 1)
Javascript (parte 1)Javascript (parte 1)
Javascript (parte 1)
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Javascript Orientado a Objeto
Javascript Orientado a ObjetoJavascript Orientado a Objeto
Javascript Orientado a Objeto
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
 
Aula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e ProgramaçãoAula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e Programação
 
Apostila de Fundamentos Java
Apostila de Fundamentos JavaApostila de Fundamentos Java
Apostila de Fundamentos Java
 
Padrões MVC
Padrões MVCPadrões MVC
Padrões MVC
 

Destaque

Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasRodrigo Branas
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJSRodrigo Branas
 
Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Emerson Macedo
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões RegularesRodrigo Branas
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSRodrigo Branas
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done RightAndré Luís
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTImarcochella
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serioJaydson Gomes
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoEduardo Bohrer
 
O que é CMS? Foco no conteúdo e não no lero lero
O que é CMS? Foco no conteúdo e não no lero leroO que é CMS? Foco no conteúdo e não no lero lero
O que é CMS? Foco no conteúdo e não no lero leroThiago Avelino
 
Javascript levado a sério
Javascript levado a sérioJavascript levado a sério
Javascript levado a sériosaspi2
 

Destaque (20)

Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões Regulares
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTI
 
Java script aula 03 - objetos
Java script   aula 03 - objetosJava script   aula 03 - objetos
Java script aula 03 - objetos
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
O que é CMS? Foco no conteúdo e não no lero lero
O que é CMS? Foco no conteúdo e não no lero leroO que é CMS? Foco no conteúdo e não no lero lero
O que é CMS? Foco no conteúdo e não no lero lero
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
Javascript levado a sério
Javascript levado a sérioJavascript levado a sério
Javascript levado a sério
 

Semelhante a Desvendando a linguagem JavaScript

Comandos gerais do PHP
Comandos gerais do PHPComandos gerais do PHP
Comandos gerais do PHPPaulo Dayvson
 
Três anos de Scala no NewsMonitor
Três anos de Scala no NewsMonitorTrês anos de Scala no NewsMonitor
Três anos de Scala no NewsMonitorFelipe Hummel
 
Swift em 45 minutos - TDC Sao Paulo 2014
Swift em 45 minutos - TDC Sao Paulo 2014Swift em 45 minutos - TDC Sao Paulo 2014
Swift em 45 minutos - TDC Sao Paulo 2014Helder da Rocha
 
Curso PHP UNIFACS 2014.1 – 1a Aula
Curso PHP UNIFACS 2014.1 – 1a AulaCurso PHP UNIFACS 2014.1 – 1a Aula
Curso PHP UNIFACS 2014.1 – 1a AulaJonata Weber
 
Programação Orientada a Objetos parte 3
Programação Orientada a Objetos parte 3Programação Orientada a Objetos parte 3
Programação Orientada a Objetos parte 3Elaine Cecília Gatto
 
Curso Java Básico - Aula 01
Curso Java Básico - Aula 01Curso Java Básico - Aula 01
Curso Java Básico - Aula 01Natanael Fonseca
 
Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014Zarathon Maia
 
Desenvolvimento ágil de software com Ruby on Rails
Desenvolvimento ágil de software com Ruby on RailsDesenvolvimento ágil de software com Ruby on Rails
Desenvolvimento ágil de software com Ruby on RailsLucas Caton
 
Nova Infraestrutura JSON: System.JSON na prática
Nova Infraestrutura JSON: System.JSON na prática Nova Infraestrutura JSON: System.JSON na prática
Nova Infraestrutura JSON: System.JSON na prática Mario Guedes
 
Ruby on rails gds 2011
Ruby on rails   gds 2011Ruby on rails   gds 2011
Ruby on rails gds 2011JogosUnisinos
 
Apresentação ruby + rails 2014
Apresentação ruby + rails 2014Apresentação ruby + rails 2014
Apresentação ruby + rails 2014Marcelo Bohn
 
Esta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com RailsEsta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com Railsismaelstahelin
 
Ruby para programadores java
Ruby para programadores javaRuby para programadores java
Ruby para programadores javaRodrigo Urubatan
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN StackBruno Catão
 
Workshop ExtJS4
Workshop ExtJS4Workshop ExtJS4
Workshop ExtJS4javamanrj
 
TypeScript - Campus party 2013
TypeScript - Campus party 2013TypeScript - Campus party 2013
TypeScript - Campus party 2013Giovanni Bassi
 

Semelhante a Desvendando a linguagem JavaScript (20)

Comandos gerais do PHP
Comandos gerais do PHPComandos gerais do PHP
Comandos gerais do PHP
 
Palestra Ruby
Palestra RubyPalestra Ruby
Palestra Ruby
 
Três anos de Scala no NewsMonitor
Três anos de Scala no NewsMonitorTrês anos de Scala no NewsMonitor
Três anos de Scala no NewsMonitor
 
Swift em 45 minutos - TDC Sao Paulo 2014
Swift em 45 minutos - TDC Sao Paulo 2014Swift em 45 minutos - TDC Sao Paulo 2014
Swift em 45 minutos - TDC Sao Paulo 2014
 
Curso PHP UNIFACS 2014.1 – 1a Aula
Curso PHP UNIFACS 2014.1 – 1a AulaCurso PHP UNIFACS 2014.1 – 1a Aula
Curso PHP UNIFACS 2014.1 – 1a Aula
 
Curso Ruby
Curso RubyCurso Ruby
Curso Ruby
 
Programação Orientada a Objetos parte 3
Programação Orientada a Objetos parte 3Programação Orientada a Objetos parte 3
Programação Orientada a Objetos parte 3
 
Curso Java Básico - Aula 01
Curso Java Básico - Aula 01Curso Java Básico - Aula 01
Curso Java Básico - Aula 01
 
Linguagem Java, fundamentos da linguagem Java
Linguagem Java, fundamentos da linguagem JavaLinguagem Java, fundamentos da linguagem Java
Linguagem Java, fundamentos da linguagem Java
 
Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014Minicurso de Rails - WTISC 2014
Minicurso de Rails - WTISC 2014
 
Desenvolvimento ágil de software com Ruby on Rails
Desenvolvimento ágil de software com Ruby on RailsDesenvolvimento ágil de software com Ruby on Rails
Desenvolvimento ágil de software com Ruby on Rails
 
Nova Infraestrutura JSON: System.JSON na prática
Nova Infraestrutura JSON: System.JSON na prática Nova Infraestrutura JSON: System.JSON na prática
Nova Infraestrutura JSON: System.JSON na prática
 
Ruby on rails gds 2011
Ruby on rails   gds 2011Ruby on rails   gds 2011
Ruby on rails gds 2011
 
Apresentação ruby + rails 2014
Apresentação ruby + rails 2014Apresentação ruby + rails 2014
Apresentação ruby + rails 2014
 
Esta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com RailsEsta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com Rails
 
Ruby para programadores java
Ruby para programadores javaRuby para programadores java
Ruby para programadores java
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Workshop ExtJS4
Workshop ExtJS4Workshop ExtJS4
Workshop ExtJS4
 
TypeScript - Campus party 2013
TypeScript - Campus party 2013TypeScript - Campus party 2013
TypeScript - Campus party 2013
 
Linguagem Java- Iniciação à programação Java
Linguagem Java- Iniciação à programação JavaLinguagem Java- Iniciação à programação Java
Linguagem Java- Iniciação à programação Java
 

Mais de Rodrigo Branas

Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasRodrigo Branas
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasRodrigo Branas
 
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasNode.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasRodrigo Branas
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasRodrigo Branas
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasRodrigo Branas
 
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasNode.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasRodrigo Branas
 
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisasRodrigo Branas
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - IntroduçãoRodrigo Branas
 
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remotoRodrigo Branas
 
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging#3 - Git - Branching e Merging
#3 - Git - Branching e MergingRodrigo Branas
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJSRodrigo Branas
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJSRodrigo Branas
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJSRodrigo Branas
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSRodrigo Branas
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJSRodrigo Branas
 
Técnicas de Refactoring
Técnicas de RefactoringTécnicas de Refactoring
Técnicas de RefactoringRodrigo Branas
 

Mais de Rodrigo Branas (20)

Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
 
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasNode.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo Branas
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
 
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasNode.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
 
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - Introdução
 
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto
 
#4 - Git - Stash
#4 - Git - Stash#4 - Git - Stash
#4 - Git - Stash
 
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging#3 - Git - Branching e Merging
#3 - Git - Branching e Merging
 
#2 - Git - DAG
#2 - Git - DAG#2 - Git - DAG
#2 - Git - DAG
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
 
Técnicas de Refactoring
Técnicas de RefactoringTécnicas de Refactoring
Técnicas de Refactoring
 

Desvendando a linguagem JavaScript

  • 1. Desvendando a linguagem JavaScript Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  • 2. Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br Formado em Ciências da Computação pela UFSC e MBA em Gerenciamento de Projetos pela FGV, é arquiteto de software há mais de 15 anos, especialista nas linguagens Java e JavaScript. É também autor do livro AngularJS Essentials e de diversos artigos da revista Java Magazine. Além disso, é professor e palestrante, tendo participado da formação de mais de 1.000 desenvolvedores de software e apresentado mais de 100 palestras em eventos no Brasil e no exterior. Fundador da Agile Code, uma empresa de treinamento e consultoria, atualmente é apresentador de um canal no YouTube sobre JavaScript, AngularJS e muito mais!
  • 3. Acompanhe a série Desvendando a linguagem JavaScript pelo YouTube em: http://www.youtube.com/rodrigobranas
  • 4. JavaScript é uma das linguagens mais populares do mundo!
  • 8. Mas ao mesmo tempo é uma das linguagens mais odiadas!
  • 9. Alguém aqui odeia JavaScript?
  • 10. Boa parte dos problemas tem relação direta com a DOM, não com a linguagem
  • 11. DOM, ou Document Object Model, é uma API padronizada pela W3C em 1998 que permite a manipulação de documentos escritos em HTML, XHTML e XML.
  • 12. Você costuma ler o manual antes de utilizar um produto que comprou?
  • 14. "A linguagem JavaScript é a única que as pessoas acham que não precisam aprender antes de começar a utilizar" (Douglas Crockford)
  • 15. O problema é que ela é utiliza conceitos bem diferentes das outras linguagens que estamos acostumados!
  • 16. Era uma vez, uma linguagem de programação chamada HyperTalk
  • 17. A linguagem foi criada por Dan Winkler em 1987 para a plataforma HyperCard da Apple
  • 19. Linguagem HyperTalk Extremamente amigável, ideal para iniciantes 1. on mouseUp 2. put "100,100" into pos 3. repeat with x = 1 to the number of card buttons 4. set the location of card button x to pos 5. add 15 to item 1 of pos 6. end repeat 7. end mouseUp
  • 20. A Netscape teve a ideia de implementar um conceito semelhante!
  • 21. Então, contrataram Brendan Eich para essa difícil missão!
  • 22. Na ocasião, pelo sua afinidade com a linguagem Scheme, ele propos utilizá-la
  • 23. Até que um dia, alguém na Netscape descobriu o que era Scheme!
  • 24. Linguagem Scheme Menos amigável, funcional, baseada em LISP 1. (define (list-of-squares n) 2. (let loop ((i n) (res '())) 3. (if (< i 0) 4. res 5. (loop (- i 1) (cons (* i i) res))))) 6. (list-of-squares 9) ===> (0 1 4 9 16 25 36 49 64 81)
  • 25. Com base no público alvo, a linguagem precisava ser baseada em algo mais popular
  • 27. Brendan Eich utilizou como base as linguagens Java, Scheme, Self e com algumas influências de Perl
  • 28. Java • Sintaxe • Algumas convenções • Date • Math Scheme • Lambda • Closure • Tipagem fraca Self • Herança baseada em protótipos • Objetos dinâmicos Perl • Expressões Regulares
  • 29. Seu primeiro nome foi Mocha, por sugestão de Marc Andreessen, fundador da Netscape
  • 30. A linguagem foi lançada oficialmente em Setembro de 1995 com o nome de LiveScript na versão beta do Netscape Navigator 2.0
  • 32. Em Dezembro, o nome da linguagem mudou para JavaScript, a partir de um acordo feito com a Sun com o objetivo de destruir a Microsoft
  • 33. O nome JavaScript, foi registrado como uma marca pertencente a Sun e era de uso exclusivo da Netscape
  • 34. A Microsoft fez uma engenharia reversa da linguagem da Netscape, criando a linguagem JScript
  • 35. Com medo de perder o controle, a Netscape busca uma série de entidades como a W3C e a ISO com o objetivo de padronizar a linguagem
  • 36. Em 1997, após algumas tentativas, a Netscape conseguiu padronizar a linguagem junto a ECMA Internacional, nomeando-a ECMAScript
  • 38. • A linguagem JavaScript é interpretada
  • 39. • A linguagem JavaScript é interpretada • Possui orientação a objetos baseada em protótipos, não possuindo classes
  • 40. • A linguagem JavaScript é interpretada • Possui orientação a objetos baseada em protótipos, não possuindo classes • A linguagem possui uma tipagem fraca e dinâmica
  • 41. • A linguagem JavaScript é interpretada • Possui orientação a objetos baseada em protótipos, não possuindo classes • A linguagem possui uma tipagem fraca e dinâmica • Além disso, possui funções de primeira classe
  • 42. • A linguagem JavaScript é interpretada • Possui orientação a objetos baseada em protótipos, não possuindo classes • A linguagem possui uma tipagem fraca e dinâmica • Além disso, possui funções de primeira classe • A linguagem não apresenta suporte a programação multi-thread
  • 43. • A linguagem JavaScript é interpretada • Possui orientação a objetos baseada em protótipos, não possuindo classes • A linguagem possui uma tipagem fraca e dinâmica • Além disso, possui funções de primeira classe • A linguagem não apresenta suporte a programação multi-thread • Está atualmente na versão 6
  • 46. As variáveis devem ser criadas seguindo as regras: • Devem começar por uma letra, $ ou _
  • 47. As variáveis devem ser criadas seguindo as regras: • Devem começar por uma letra, $ ou _ • Após a primeira letra, podem conter números
  • 48. As variáveis devem ser criadas seguindo as regras: • Devem começar por uma letra, $ ou _ • Após a primeira letra, podem conter números • Pela convenção, começam com letra minúscula e usam camelCase
  • 49. As variáveis devem ser criadas seguindo as regras: • Devem começar por uma letra, $ ou _ • Após a primeira letra, podem conter números • Pela convenção, começam com letra minúscula e usam camelCase • São case-sensitive
  • 50. Declarando uma variável 1. var name = "AgileCode"; 2. var top10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 3. var $scope = {title: "JavaScript", version: "6"}; 4. var _person = "John"; 5. var numberCode = 897987987; 6. var a = 10, b = 9, c = 8; 7. var language;
  • 52. Criando um Number 1. var nota = 10; 2. 3. nota.toExponencial(2); // 100 4. nota.toFixed(2); // 10.00 5. nota.toPrecision(1); // 1e+1 6. nota.toString(); // "10" 7. nota.valueOf(); // 10
  • 53. Só existe um tipo numérico na linguagem e ele tem as seguintes características: • IEEE-754 (Standard for Floating-Point)
  • 54. Só existe um tipo numérico na linguagem e ele tem as seguintes características: • IEEE-754 (Standard for Floating-Point) • binary64 ou Double Precision
  • 55. Só existe um tipo numérico na linguagem e ele tem as seguintes características: • IEEE-754 (Standard for Floating-Point) • binary64 ou Double Precision • Cuidado com as exceções!
  • 57. > 0.1 + 0.2
  • 58. > 0.1 + 0.2 0.30000000000000004
  • 59. > 0.1 + 0.2 0.30000000000000004 > 3 / 0
  • 60. > 0.1 + 0.2 0.30000000000000004 > 3 / 0 Infinity
  • 61. > 0.1 + 0.2 0.30000000000000004 > 3 / 0 Infinity > "AgileCode" * 10;
  • 62. > 0.1 + 0.2 0.30000000000000004 > 3 / 0 Infinity > "AgileCode" * 10; NaN
  • 63. Math API Similar a classe Math da linguagem Java • abs – Valor absoluto do número • floor – Valor inteiro do número • log – Logarítmo natural do número (base E) • min – Retorna o menor número • max – Retorna o maior número • pow - Potência do número • random – Gera um número randômico • round – Arredonda o número para o inteiro mais próximo • sin - Seno do número • sqrt - Raíz quadrada do número • tan – Tangente do número
  • 65. Uma String é composta por uma sequência de 0 ou mais caracteres com as seguintes características: • São imutáveis
  • 66. Uma String é composta por uma sequência de 0 ou mais caracteres com as seguintes características: • São imutáveis • Podem ser declaradas com aspas simples ou duplas
  • 67. Criando uma String 1. var nome = "AgileCode"; 2. 3. nome.chatAt(2); // "i" 4. nome.charCodeAt(0); // 65 5. nome.concat("!"); // "AgileCode!" 6. nome.indexOf('e'); // 4 7. nome.replace('Code', '!'); // "Agile!" 8. nome.split('e'); // ['Agil', 'Cod', ''];
  • 68. String API • chartAt – Retorna o char da posição • charCodeAt – Retorna o código do char da posição • concat – Concatena duas Strings • indexOf – Retorna o índice da primeira ocorrência do char • lastIndexOf – Retorna o índice da última ocorrência do char • match – Retorna uma array resultante da busca com RegExp • replace – Substitui parte da String por outra • search – Retorna a posição da String ou RegExp • slice – Extrai parte da String, retornando uma nova • split – Divide a String com base na expressão regular informada • substring - Extrai a parte da String desejada • toLowerCase – Gera uma nova String em letra minúscula • toUpperCase – Gera uma nova String em letra maiúscula • trim – Remove os espaços em branco do início e do fim da String • valueOf – Retorna o valor primitivo da String
  • 70. Criando um Boolean 1. var isento = true; 2. var estudante = false; 3. 4. isento.toString(); // "true" 5. estudante.valueOf(); // false
  • 71. Cuidado com os perigosos e confusos tipos truthy e falsy
  • 72. A linguagem JavaScript assume o estado de determinados tipos como true ou false, dependendo do caso.
  • 73. > !!0
  • 79. > !!0 false > !!NaN false > !!'' false > !!false
  • 80. > !!0 false > !!NaN false > !!'' false > !!false false
  • 81. > !!0 false > !!NaN false > !!'' false > !!false false > !!null
  • 82. > !!0 false > !!NaN false > !!'' false > !!false false > !!null false
  • 83. > !!0 false > !!NaN false > !!'' false > !!false false > !!null false > !!undefined
  • 84. > !!0 false > !!NaN false > !!'' false > !!false false > !!null false > !!undefined false
  • 85. Todos os outros são truthy por padrão
  • 87. O tipo undefined é retornado caso uma propriedade de um determinado objeto seja consultada e não exista
  • 88. null
  • 89. O tipo null indica a ausência de valor em uma determinada propriedade já existente
  • 91. Um objeto é uma coleção dinâmica de chaves e valores de qualquer tipo de dado. É possível adicionar ou remover propriedades a qualquer momento.
  • 92. Criando um Object 1. var pessoa = {};
  • 93. Adicionando propriedades ao objeto 1. var pessoa = { 2. nome: "João", 3. };
  • 94. Adicionando propriedades ao objeto 1. var pessoa = { 2. nome: "João", 3. idade: 20, 4. };
  • 95. Adicionando propriedades ao objeto 1. var pessoa = { 2. nome: "João", 3. idade: 20, 4. telefone: null, 5. };
  • 96. Adicionando propriedades ao objeto 1. var pessoa = { 2. nome: "João", 3. idade: 20, 4. telefone: null, 5. endereco: { 6. logradouro: "Av. Brasil", 7. numero: 70, 8. bairro: "Centro" 9. } 10. };
  • 97. Atribuindo propriedades a um objeto 1. pessoa.nome = "João"; 2. pessoa["nome"] = "João"; 3. pessoa.endereco.bairro = "Centro"; 4. pessoa["endereco"]["bairro"] = "Centro"; 5. pessoa.endereco["bairro"] = "Centro"; 6. pessoa.telefone = null; 7. pessoa.peso = undefined;
  • 98. Acessando as propriedades de um objeto 1. pessoa.nome; // "João" 2. pessoa["nome"]; // "João" 3. pessoa.endereco.bairro; // "Centro" 4. pessoa["endereco"]["bairro"]; // "Centro" 5. pessoa.endereco["bairro"]; // "Centro" 6. pessoa.telefone; // null 7. pessoa.peso; // undefined
  • 99. Apagando propriedades de um objeto 1. delete pessoa.telefone;
  • 102. A linguagem JavaScript não tem: • Classe
  • 103. A linguagem JavaScript não tem: • Classe • Construtor
  • 104. A linguagem JavaScript não tem: • Classe • Construtor • Método
  • 105. A linguagem JavaScript não tem: • Classe • Construtor • Método • Módulo
  • 107. As funções são responsáveis pelo poder da linguagem JavaScript
  • 108. Uma função é um objeto que contém um bloco de código executável.
  • 109. Esse bloco é isolado, não sendo possível acessá-lo externamente
  • 110. Na linguagem JavaScript, as funções são de primeira classe
  • 111. Função de primeira classe é aquela que pode ser atribuída a uma variável, passada como parâmetro ou ser retornada de uma outra função.
  • 113. Function Declaration 1. function soma(a, b) { 2. return a + b; 3. }
  • 114. Function Expression 1. var soma = function (a, b) { 2. return a + b; 3. }
  • 115. Named Function Expression O nome da função pode ser útil pois aparece no stack trace, listas de breakpoints e demais ferramentas de debbuging 1. var soma = function soma(a, b) { 2. return a + b; 3. }
  • 116. Qual é a diferença entre function declaration e expression?
  • 117. Function Declaration: A função é carregada antes do código ser interpretado 1. soma(2,2); // 4 2. function soma(a, b) { 3. return a + b; 4. }
  • 118. Function Expression: A função é carregada durante a interpretação do código 1. soma(2,2); // soma is not defined 2. var soma = function (a, b) { 3. return a + b; 4. };
  • 120. Invocando uma função diretamente no escopo global
  • 121. Invocando uma função diretamente 1. var soma = function (a, b) { 2. return a + b; 3. };
  • 122. Invocando uma função diretamente 1. var soma = function (a, b) { 2. return a + b; 3. }; 4. 5. soma(2, 2); // 4
  • 123. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150};
  • 124. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150}; 2. 3. var formulaImpostoA = function (preco) { return preco*0.1; };
  • 125. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150}; 2. 3. var formulaImpostoA = function (preco) { return preco*0.1; }; 4. 5. var calcularPreco = function (produto, formulaImposto) { 6. return produto.preco + formulaImposto(produto.preco); 7. }
  • 126. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150}; 2. 3. var formulaImpostoA = function (preco) { return preco*0.1; }; 4. 5. var calcularPreco = function (produto, formulaImposto) { 6. return produto.preco + formulaImposto(produto.preco); 7. } 8. 9. calcularPreco(produto, formulaImpostoA); // 165
  • 127. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150}; 2. 3. var formulaImpostoA = function (preco) { return preco*0.1; }; 4. var formulaImpostoB = function (preco) { return preco*0.2; }; 5. 6. var calcularPreco = function (produto, formulaImposto) { 7. return produto.preco + formulaImposto(produto.preco); 8. } 9. 10. calcularPreco(produto, formulaImpostoA); // 165
  • 128. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150}; 2. 3. var formulaImpostoA = function (preco) { return preco*0.1; }; 4. var formulaImpostoB = function (preco) { return preco*0.2; }; 5. 6. var calcularPreco = function (produto, formulaImposto) { 7. return produto.preco + formulaImposto(produto.preco); 8. } 9. 10. calcularPreco(produto, formulaImpostoA); // 165 11. calcularPreco(produto, formulaImpostoB); // 180
  • 129. Retornando uma função 1. var helloWorld = function () { 2. return function () { 3. return "Hello World!"; 4. }; 5. };
  • 130. Retornando uma função 1. var helloWorld = function () { 2. return function () { 3. return "Hello World!"; 4. }; 5. }; 6. 7. helloWorld(); // [Fuction]
  • 131. Retornando uma função 1. var helloWorld = function () { 2. return function () { 3. return "Hello World!"; 4. }; 5. }; 6. 7. helloWorld(); // [Fuction] 8. helloWorld()(); // 'Hello World!'
  • 132. Invocando uma função por meio de um Objeto
  • 133. Existem métodos em JavaScript?
  • 134. Utilizando uma função como método, declarada dentro do objeto 1. var pessoa = { 2. nome: "João", 3. idade: 20, 4. getIdade: function () { 5. return this.idade; 6. } 7. }; 8. 9. pessoa.getIdade(); // 20
  • 135. Utilizando uma função como método, declarada dentro do objeto 1. var getIdade = function () { 2. return this.idade; 3. } 4. 5. var pessoa = { 6. nome: "João", 7. idade: 20, 8. getIdade: getIdade 9. }; 10. 11. pessoa.getIdade(); // 20
  • 136. Invocando uma função com call e apply
  • 137. call e apply Toda função possui os métodos call() e apply(). Eles são utilizados para indicar em qual escopo uma função deve ser executada. A diferença é basicamente a forma como é utilizado: função.call(escopo, parametro1, parametro2) função.apply(escopo, parametros)
  • 138. Invocando a função com call 1. var getIdade = function () { 2. return this.idade; 3. } 4. 5. var pessoa = { 6. nome: "João", 7. idade: 20, 8. getIdade: getIdade 9. }; 10. 11. pessoa.getIdade(); // 20 12. getIdade(); // undefined 13. getIdade.call(pessoa); // 20
  • 139. Invocando uma função por meio do operador new
  • 140. Criando objetos diretamente 1. var pedro = {nome: "Pedro",idade: 20};
  • 141. Criando objetos diretamente 1. var pedro = {nome: "Pedro",idade: 20}; 2. var maria = {nome: "Maria",idade: 30};
  • 142. Criando objetos com uma função fábrica 1. var criarPessoa = function (nome, idade) { 2. return { 3. nome: nome, 4. idade: idade 5. }; 6. } 7. 8. var pedro = criarPessoa("Pedro", 20);
  • 143. Criando objetos com uma função construtora 1. var Pessoa = function (nome, idade) { 2. this.nome = nome; 3. this.idade = idade; 4. } 5. 6. var pedro = new Pessoa("Pedro", 20);
  • 144. Não esqueça de utilizar o operador new quando utilizar funções construtoras
  • 146. Criando uma função simples 1. var helloWorld = function () { 2. return "Hello World!"; 3. }; 4. 5. helloWorld; // [Function] 6. helloWorld(); // 'Hello World!'
  • 147. Retornando uma função dentro de outra função 1. var helloWorld = function () { 2. var message = "Hello World!"; 3. return function () { 4. return message; 5. }; 6. }; 7. 8. helloWorld; // [Function] 9. helloWorld(); // [Function]
  • 148. Retornando uma função dentro de outra função 1. var helloWorld = function () { 2. var message = "Hello World!"; 3. return function () { 4. return message; 5. }; 6. }; 7. 8. helloWorld; // [Function] 9. helloWorld(); // [Function] 10. helloWorld()(); // 'Hello World!'
  • 149. Escrevendo código reusável por meio de funções fábrica e construtora
  • 150. O poder da orientação a objetos
  • 151. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. };
  • 152. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. };
  • 153. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. return filme.diaria * dias; 4. };
  • 154. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. return filme.diaria * dias; 4. }; 5. 6. var duroDeMatar = { 7. titulo: "Duro de Matar", 8. genero: "Ação", 9. diaria: 5 10. }; 11. var dataAluguel = new Date(2010, 2, 1); 12. var dataDevolucao = new Date(2010, 2, 3); 13. calcularLocacao(duroDeMatar, dataAluguel, dataDevolucao); // 10
  • 155. E se eu quiser reusar aquele trecho de código em outro lugar?
  • 156. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. return filme.diaria * dias; 4. };
  • 157. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. return filme.diaria * dias; 4. };
  • 158. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = 3. return filme.diaria * dias; 4. };
  • 159. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 3. return filme.diaria * dias; 4. };
  • 160. 1. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 2. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. }; 4. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 5. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 6. return filme.diaria * dias; 7. };
  • 161. 1. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 2. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. }; 4. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 5. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 6. return filme.diaria * dias; 7. };
  • 162. Podemos distribuir o código por meio de um objeto utilizando uma função fábrica
  • 163. 1. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 2. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. }; 4. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 5. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 6. return filme.diaria * dias; 7. };
  • 164. 1. var criarPeriodo = function (inicio, fim) { 2. }; 3. 4. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 5. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 6. }; 7. 8. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 9. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 10. return filme.diaria * dias; 11. };
  • 165. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. }; 4. }; 5. 6. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 7. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 8. }; 9. 10. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 11. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 12. return filme.diaria * dias; 13. };
  • 166. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. }; 5. }; 6. 7. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 8. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 9. }; 10. 11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 12. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 13. return filme.diaria * dias; 14. };
  • 167. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. }; 6. }; 7. 8. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 9. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 10. }; 11. 12. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 13. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 14. return filme.diaria * dias; 15. };
  • 168. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 12. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 13. }; 14. 15. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 16. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 17. return filme.diaria * dias; 18. };
  • 169. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularDiferencaEntreDuasDatasEmDias = function (inicio, fim) { 12. return (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 13. }; 14. 15. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 16. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 17. return filme.diaria * dias; 18. };
  • 170. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 12. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 13. return filme.diaria * dias; 14. };
  • 171. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 12. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 13. return filme.diaria * dias; 14. };
  • 172. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 12. 13. return filme.diaria * dias; 14. };
  • 173. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 12. var periodo = criarPeriodo(dataAluguel, dataDevolucao); 13. return filme.diaria * dias; 14. };
  • 174. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 12. var periodo = criarPeriodo(dataAluguel, dataDevolucao); 13. var dias = periodo.calcularDiferencaEmDias(); 14. return filme.diaria * dias; 15. };
  • 175. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 12. var periodo = criarPeriodo(dataAluguel, dataDevolucao); 13. var dias = periodo.calcularDiferencaEmDias(); 14. return filme.diaria * dias; 15. };
  • 176. A linguagem não possui nenhum tipo de modificador de visibilidade, sendo assim será necessário recorrer a outra estratégia para encapsular propriedades de objetos
  • 177. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. };
  • 178. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var inicio = new Date(2010, 3, 1); 12. var fim = new Date(2010, 3, 3); 13. var periodo = criarPeriodo(inicio, fim); 14. periodo.inicio; // Thu Apr 01 2010 00:00:00 GMT-0300 (BRT) 15. periodo.fim; // Sat Apr 03 2010 00:00:00 GMT-0300 (BRT) 16. periodo.calcularDiferencaEmDias(); // 2
  • 179. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. }; 10. 11. var inicio = new Date(2010, 3, 1); 12. var fim = new Date(2010, 3, 3); 13. var periodo = criarPeriodo(inicio, fim); 14. periodo.inicio; // Thu Apr 01 2010 00:00:00 GMT-0300 (BRT) 15. periodo.fim; // Sat Apr 03 2010 00:00:00 GMT-0300 (BRT) 16. periodo.calcularDiferencaEmDias(); // 2 17. periodo.inicio = new Date(2010, 3, 13); 18. periodo.calcularDiferencaEmDias(); // -10
  • 180. Se lembra da closure?
  • 181. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. inicio: inicio, 4. fim: fim, 5. calcularDiferencaEmDias: function () { 6. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 7. } 8. }; 9. };
  • 182. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
  • 183. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (this.fim.getTime() - this.inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
  • 184. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
  • 185. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. }; 8. var inicio = new Date(2010, 3, 1); 9. var fim = new Date(2010, 3, 3); 10. var periodo = criarPeriodo(inicio, fim); 11. periodo.inicio; // undefined 12. periodo.fim; // undefined 13. periodo.calcularDiferencaEmDias(); // 2
  • 186. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
  • 187. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
  • 188. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: 4. }; 5. };
  • 189. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: _calcularDiferencaEmDias 4. }; 5. };
  • 190. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: _calcularDiferencaEmDias 4. }; 5. };
  • 191. 1. var criarPeriodo = function (inicio, fim) { 2. var _calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. return { 6. calcularDiferencaEmDias: _calcularDiferencaEmDias 7. }; 8. };
  • 192. 1. var criarPeriodo = function (inicio, fim) { 2. var _calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. return { 6. calcularDiferencaEmDias: _calcularDiferencaEmDias 7. }; 8. };
  • 193. 1. var criarPeriodo = function (inicio, fim) { 2. var _calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. return { 6. calcularDiferencaEmDias: _calcularDiferencaEmDias 7. }; 8. }; 9. 10. var inicio = new Date(2010, 3, 1); 11. var fim = new Date(2010, 3, 3); 12. var periodo = criarPeriodo(inicio, fim); 13. periodo.inicio; // undefined 14. periodo.fim; // undefined 15. periodo.calcularDiferencaEmDias(); // 2
  • 194. Também é possível utilizar uma função construtora
  • 195. 1. var Periodo = function (inicio, fim) { 2. };
  • 196. 1. var Periodo = function (inicio, fim) { 2. this.calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. };
  • 197. 1. var Periodo = function (inicio, fim) { 2. this.calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. };
  • 198. 1. var Periodo = function (inicio, fim) { 2. this.calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. }; 6. 7. var inicio = new Date(2010, 3, 1); 8. var fim = new Date(2010, 3, 3); 9. var periodo = new Periodo(inicio, fim); 10. periodo.inicio; // undefined 11. periodo.fim; // undefined 12. periodo.calcularDiferencaEmDias(); // 2
  • 199. Array Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  • 200. Não existem Arrays de verdade na linguagem JavaScript
  • 201. Os Arrays são apenas objetos especiais que oferecem meios para acessar e manipular suas propriedades por meio de índices.
  • 202. Criando um Array com [] 1. var carros = [];
  • 203. Inserindo elementos no Array 1. var carros = []; 2. 3. a[0] = "Ka";
  • 204. Inserindo elementos no Array 1. var carros = []; 2. 3. a[0] = "Ka"; 4. a[1] = "Corsa";
  • 205. Inserindo elementos no Array 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[3] = "Palio";
  • 206. Também é possível criar um Array inicializado com elementos 1. var carros = ["Ka", "Corsa", "Palio"];
  • 207. Criando um Array com new Array() 1. var carros = new Array();
  • 208. Criando um Array com new Array() 1. var carros = new Array();
  • 209. Inicializando o Array com elementos 1. var carros = new Array("Ka", "Corsa", "Palio");
  • 210. Também é possível inicializar o Array, com um tamanho inicial 1. var carros = new Array(10);
  • 211. Não se esqueça que o Array não tem tamanho fixo e o tamanho inicial é apenas uma forma de inicializá-lo
  • 212. Array API • concat – Junta dois arrays, retornando a cópia dos dois • every – Retorna true se todos os elementos atenderem a função • filter – Filtra o array com base em uma função de filtro • forEach – Percorre o array, invocando uma função para cada elemento • indexOf – Retorna o índice do primeiro elemento encontrado • join – Cria uma String customizada com todos os elementos do array • lastIndexOf – Retorna o índice do último elemento encontrado • map – Trasforma os elementos de um array • pop – Remove o último elemento do array, retornando-o • push – Adiciona um elemento no array, retornando o length • reduce – Acumula os elementos de um array • reverse – Inverte a ordem dos elementos do array • shift - Remove o primeiro elemento do array, retornando-o • some – Retorna true se um dos elementos atender a função • slice - Seleciona uma parte do array, retornando-a • sort - Ordena os elementos do array com base em uma função • splice - Adiciona ou remove elementos de uma posição específica • toString – Converte o array em uma String • unshift – Adiciona elementos no início do array • valueOf – Retorna o próprio array
  • 213. Retornando o Array com valueOf 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.valueOf(); // ["Ka", "Corsa", "Palio"]
  • 214. Visualizando o Array com toString 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.toString(); // ["Ka", "Corsa", "Palio"]
  • 215. Consultando o tamanho do Array com length 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.length; // 3
  • 216. Inserindo novos elementos no final com push 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.push("Gol"); // 4 8. 9. carros.toString(); // ["Ka", "Corsa", "Palio", "Gol"]
  • 217. Retirando elementos do final com pop 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.pop(); // "Palio" 8. 9. carros.toString(); // ["Ka", "Corsa"]
  • 218. Inserindo novos elementos no início com unshift 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.unshift("Gol"); // 4 8. 9. carros.toString(); // ["Gol", "Ka", "Corsa", "Palio"]
  • 219. Retirando elementos do início com shift 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.shift(); // "Ka" 8. 9. carros.toString(); // ["Corsa", "Palio"]
  • 220. Localizando elementos com indexOf 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.indexOf("Corsa"); // 1
  • 221. Removendo elementos em uma posição com splice 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. var pos = carros.indexOf("Corsa"); // 1 8. 9. carros.splice(pos, 1); // ["Corsa"] 10. 11. carros.toString(); // ["Ka", "Palio"]
  • 222. Substituindo elementos em uma posição com splice 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. var pos = carros.indexOf("Corsa"); // 1 8. 9. carros.splice(pos, 1, "Sonic"); // ["Corsa"] 10. 11. carros.toString(); // ["Ka", "Sonic", "Palio"]
  • 223. Adicionando elementos em uma posição com splice 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. var pos = carros.indexOf("Corsa"); // 1 8. 9. carros.splice(pos, 0, "Sonic"); // [] 10. 11. carros.toString(); // ["Ka", "Sonic", "Corsa", "Palio"]
  • 224. Iterando em um Array com forEach 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. 7. carros.forEach(function (elemento) { 8. // lógica de iteração 9. });
  • 225. Filtrando o Array com filter 1. var carros = []; 2. 3. carros[0] = {marca: "Ford", modelo: "Ka"}; 4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"}; 5. carros[2] = {marca: "Fiat", modelo: "Palio"}; 6. 7. carros.filter(function (elemento) { 8. return elemento.marca === "Ford"; 9. }); 10. // [{marca: "Ford", modelo: "Ka"}]
  • 226. Testando os elementos do Array com every 1. var carros = []; 2. 3. carros[0] = {marca: "Ford", modelo: "Ka"}; 4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"}; 5. carros[2] = {marca: "Fiat", modelo: "Palio"}; 6. 7. carros.every(function (elemento) { 8. return elemento.marca === "Ford"; 9. }); 10. // false
  • 227. Testando os elementos do Array com some 1. var carros = []; 2. 3. carros[0] = {marca: "Ford", modelo: "Ka"}; 4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"}; 5. carros[2] = {marca: "Fiat", modelo: "Palio"}; 6. 7. carros.some(function (elemento) { 8. return elemento.marca === "Ford"; 9. }); 10. // true
  • 228. Mapeando os elementos do Array com map 1. var carros = []; 2. 3. carros[0] = {marca: "Ford", modelo: "Ka"}; 4. carros[1] = {marca: "Chevrolet", modelo: "Corsa"}; 5. carros[2] = {marca: "Fiat", modelo: "Palio"}; 6. 7. carros.map(function (elemento) { 8. return elemento.marca; 9. }); 10. // ["Ford", "Chevrolet", "Fiat"]
  • 229. Processando os elementos do Array com reduce 1. var carros = []; 2. 3. carros[0] = {modelo: "Ka", preco: 28800}; 4. carros[1] = {modelo: "Corsa", preco: 34750}; 5. carros[2] = {modelo: "Palio", preco: 32000}; 6. 7. carros.reduce(function (prev, cur) { 8. return prev + cur.preco; 9. }, 0); 10. // 95550
  • 230. Concatenando dois Arrays com concat 1. var carros = ["Ka", "Corsa", "Palio"]; 2. var motos = ["Honda", "Yamaha"]; 3. 4. var veiculos = carros.concat(motos); 5. 6. veiculos.toString(); // ["Ka", "Corsa", "Palio", "Honda", "Yamaha"]
  • 231. Fatiando um Array com slice 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. carros[3] = "Gol"; 7. 8. carros.slice(0,2); // ["Ka", "Corsa"] 9. carros.slice(1,3); // ["Corsa", "Palio"] 10. carros.slice(2); // ["Palio", "Gol"]
  • 232. Invertendo a ordem de um Array com reverse 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. carros[3] = "Gol"; 7. 8. carros.reverse(); 9. 10. carros.toString(); // ["Gol", "Palio", "Corsa", "Ka"]
  • 233. Ordenando os elementos de um Array com sort 1. var carros = []; 2. 3. carros[0] = {modelo: "Ka", preco: 28800}; 4. carros[1] = {modelo: "Corsa", preco: 34750}; 5. carros[2] = {modelo: "Palio", preco: 32000}; 6. 7. carros.sort(function (a, b) { 8. return a.preco - b.preco; 9. }); 10. 11. carros.valueOf(); // ["Ka", "Palio", "Corsa"]
  • 234. Juntando os elementos um Array com join 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[2] = "Palio"; 6. carros[3] = "Gol"; 7. 8. carros.join(";"); // "Ka;Corsa;Palio;Gol"
  • 235. Expressões Regulares Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  • 236. As expressões regulares são estruturas formadas por uma sequência de caracteres que especificam um padrão formal
  • 240. Criando uma expressão regular 1. var regExp = /<expressão regular>/;
  • 241. Criando uma expressão regular 1. var regExp = new RegExp("<expressão regular>");
  • 242. RegExp API exec – Executa a RegExp, retornando os detalhes test – Testa a RegExp, retornando true ou false
  • 243. Telefone – Passo 1 Nosso primeiro exemplo envolve o reconhecimento de um telefone simples: 9999-9999. Esse telefone será evoluído por meio de novos cenários para estimular a utilização de grupos, metacaracteres, quantificadores e muito mais!
  • 244. Executando a expressão regular 1. var regExp = /9999-9999/; 2. 3. var telefone = "9999-9999"; 4. regExp.exec(telefone); // ['9999-9999', index: 0, input: '9999-9999']
  • 245. Testando a expressão regular 1. var regExp = /9999-9999/; 2. 3. var telefone = "9999-9999"; 4. regExp.test(telefone); // true
  • 246. Telefone – Passo 2 Evoluímos nosso primeiro exemplo e agora o telefone tem código de área: (48) 9999-9999, como fazer para reconhecê-lo?
  • 247. Testando a expressão regular 1. var regExp = /9999-9999/; 2. 3. var telefone = "9999-9999"; 4. regExp.test(telefone); // true
  • 248. Testando a expressão regular 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // false
  • 249. Escapando caracteres especiais - A barra é utilizada antes de caracteres especiais, com o objetivo de escapá-los.
  • 250. Escapando caracteres especiais 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // false
  • 251. Escapando caracteres especiais 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
  • 252. Telefone – Passo 3 Vamos evoluir novamente e agora, no nosso terceiro exemplo, temos que fazer com que o telefone seja reconhecido únicamente, não permitindo outros caracteres antes e depois!
  • 253. Iniciando e finalizando com um determinado caractere ^ - Inicia com um determinado caractere $ - Finaliza com um determinado caractere
  • 254. Lidando com caracteres antes e depois 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "Ligue para (90) 9999-9999, tratar com João"; 4. regExp.test(telefone); // true
  • 255. Lidando com caracteres antes e depois 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "Ligue para (90) 9999-9999, tratar com João"; 4. regExp.test(telefone); // false
  • 256. Lidando com caracteres antes e depois 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
  • 257. Telefone – Passo 4 Chegou a hora de aceitar qualquer número de telefone, para isso precisamos flexibilizar a expressão regular por meio de grupos.
  • 258. Grupos de caracteres [abc] – Aceita qualquer caractere dentro do grupo, nesse caso a, b e c [^abc] – Não aceita qualquer caractere dentro do grupo, nesse caso a, b ou c [0-9] – Aceita qualquer caractere entre 0 e 9 [^0-9] – Não aceita qualquer caractere entre 0 e 9
  • 259. Utilizando grupos de caracteres 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
  • 260. Utilizando grupos de caracteres 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(80) 9977-8899"; 4. regExp.test(telefone); // false
  • 261. Utilizando grupos de caracteres 1. var regExp = /^([0-9][0-9]) [0-9][0-9][0-9][0-9]-[0- 9][0-9][0-9][0-9]$/; 2. 3. var telefone = "(80) 9977-8899"; 4. regExp.test(telefone); // true
  • 262. Telefone – Passo 5 Não é muito grupo? Para evitar a repetição exagerada de padrões em uma expressão regular, podemos utilizar quantificadores.
  • 263. Quantificadores – Parte 1 Os quantificadores podem ser aplicados a caracteres, grupos, conjuntos ou metacaracteres. {n} – Quantifica um número específico {n,} – Quantifica um número mínimo {n,m} – Quantifica um número mínimo e um número máximo
  • 264. Utilizando quantificadores 1. var regExp = /^([0-9][0-9]) [0-9][0-9][0-9][0-9]-[0- 9][0-9][0-9][0-9]$/; 2. 3. var telefone = "(80) 9977-8899"; 4. regExp.test(telefone); // true
  • 265. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/; 2. 3. var telefone = "(80) 9977-8899"; 4. regExp.test(telefone); // true
  • 266. Telefone – Passo 6 E se for necessário aceitar números com 8 ou 9 dígitos? Podemos utilizar um quantificador para especificar um determinado intervalo.
  • 267. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/; 2. 3. var telefone = "(80) 9977-8899"; 4. regExp.test(telefone); // true
  • 268. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/; 2. 3. var telefone = "(80) 99977-8899"; 4. regExp.test(telefone); // false
  • 269. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/; 2. 3. var telefone = "(80) 99977-8899"; 4. regExp.test(telefone); // true
  • 270. Telefone – Passo 7 E se o hífen for opcional? É muito comum que se escreva sem hífen! Podemos utilizar um quantificador para torná-lo opcional.
  • 271. Quantificadores - Parte 2 Os quantificadores podem ser aplicados a caracteres, grupos, conjuntos ou metacaracteres. ? – Zero ou um * – Zero ou mais + – Um ou mais
  • 272. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/; 2. 3. var telefone = "(80) 99977-8899"; 4. regExp.test(telefone); // true
  • 273. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/; 2. 3. var telefone = "(80) 999778899"; 4. regExp.test(telefone); // false
  • 274. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/; 2. 3. var telefone = "(80) 999778899"; 4. regExp.test(telefone); // true
  • 275. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/; 2. 3. var telefone = "(80) 999778899"; 4. regExp.test(telefone); // true
  • 276. Telefone – Passo 8 E se o telefone agora estiver em uma estrutura de tabela, como fazer para reconhecer cada linha?
  • 277. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. regExp.test(telefone); // false
  • 278. Utilizando quantificadores 1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. regExp.test(telefone); // false
  • 279. Utilizando quantificadores 1. var regExp = /([0-9]{2}) [0-9]{4,5}-?[0-9]{4}/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. regExp.test(telefone); // false
  • 280. Utilizando quantificadores 1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}- ?[0-9]{4}</td>)+</tr></table>/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. regExp.test(telefone); // true
  • 281. Telefone – Passo 9 Em muitos casos, é possível substituir os grupos por metacaracteres específicos!
  • 282. Metacaracteres . – Representa qualquer caractere w – Representa o conjunto [a-zA-Z0-9_] W – Representa o conjunto [^a-zA-Z0-9_] d – Representa o conjunto [0-9] D – Representa o conjunto [^0-9] s – Representa um espaço em branco S – Representa um não espaço em branco n – Representa uma quebra de linha t – Representa um tab
  • 283. Utilizando metacaracteres 1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}- ?[0-9]{4}</td>)+</tr></table>/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. regExp.test(telefone); // true
  • 284. Utilizando metacaracteres 1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}- ?[0-9]{4}</td>)+</tr></table>/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. regExp.test(telefone); // true
  • 285. Utilizando metacaracteres 1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}- ?d{4}</td>)+</tr></table>/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. regExp.test(telefone); // true
  • 286. String API match – Executa uma busca na String e retorna um array contendo os dados encontrados, ou null. split – Divide a String com base em uma outra String fixa ou expressão regular. replace – Substitui partes da String com bae em uma outra String fixa ou expressão regular.
  • 287. Telefone – Passo 10 Chegou a hora de extrair os telefones das linhas da tabela! Vamos extrair o telefone da primeira linha.
  • 288. Extraindo dados com match 1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}- ?d{4}</td>)+</tr></table>/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // null
  • 289. Extraindo dados com match 1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}- ?d{4}</td>)+</tr></table>/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // null
  • 290. Extraindo dados com match 1. var regExp = /(d{2})sd{4,5}-?d{4}/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // '(80) 999778899'
  • 291. Telefone – Passo 11 Agora, vamos extrair o telefone de todas as linhas.
  • 292. Modificadores i – Case-insensitive matching g – Global matching m – Multiline matching
  • 293. Extraindo dados com match 1. var regExp = /(d{2})sd{4,5}-?d{4}/; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // '(80) 999778899'
  • 294. Extraindo dados com match 1. var regExp = /(d{2})sd{4,5}-?d{4}/g; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // ['(80) 999778899', '(90) 99897-8877', '(70) 98767-9999']
  • 295. Extraindo dados com match 1. var regExp = /(d{2})sd{4,5}-?d{4}/g; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // ['(80) 999778899', '(90) 99897-8877', '(70) 98767-9999']
  • 296. Extraindo dados com match 1. var regExp = /(d{2}) /g; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // ['(80)', '(90)', '(70)']
  • 297. Extraindo dados com match 1. var regExp = /d{4,5}-?d{4}/g; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.match(regExp); // ['999778899', '99897- 8877', '98767-9999']
  • 298. Telefone – Passo 12 Por fim, vamos substituir todos os telefones da tabela!
  • 299. Substituindo dados com replace 1. var regExp = /(d{2})sd{4,5}-?d{4}/g; 2. 3. var telefone = "<table> 4. <tr> 5. <td>(80) 999778899</td> 6. <td>(90) 99897-8877</td> 7. <td>(70) 98767-9999</td> 8. </tr> 9. </table>"; 10. telefone.replace(regExp, "telefone"); // <table><tr> 11. <td>telefone</td><td>telefone</td><td>telefone...
  • 300. Date
  • 301. Criando um Date 1. var a = new Date(); // Data Atual 2. var b = new Date("2002/10/10"); // Thu Oct 10 2002 00:00:00 3. var c = new Date(2000, 0, 1); // Sat Jan 01 2000 00:00:00 4. var d = new Date(1410480553258);
  • 302. Date API • getDate – Retorna o dia • getDay - Retorna o dia da semana • getFullYear – Retorna o ano • getHours – Retorna as horas • getMilliseconds – Retorna os milisegundos • getMinutes – Retorna os minutos • getMonth – Retorna o mês • getSeconds – Retorna os segundos • getTime – Retorna o tempo em milisegundos • toString - Retorna a data em String
  • 303. Estruturas Condicionais e de Repetição
  • 304. Estruturas As estruturas condicionais e de repetição da linguagem JavaScript tem a sintaxe bastante similar a linguagem Java. Além dos clássicos if/else, for, while e switch, temos o for/in que serve para fazer introspecção nas propriedades de um determinado objeto
  • 305. if/else 1. var a = 10; 2. if (a == 10) { 3. console.log("AgileCode"); 4. } else { 5. console.log("JavaScript"); 6. } 7. 8. // AgileCode
  • 306. for 1. var items = ['Radio', 'Shock', 'Window']; 2. for (var i = 0; i < items.length; i++) { 3. console.log(items[i]); 4. } 5. 6. // Radio 7. // Shock 8. // Window
  • 307. while 1. var items = ['Radio', 'Shock', 'Window']; 2. var a = 0; 3. while(a < items.length) { 4. console.log(items[a]); 5. a++; 6. } 7. 8. // Radio 9. // Shock 10. // Window
  • 308. for/in 1. var person = {name:'John', age: 20}; 2. for (var x in person) { 3. if(!person.hasOwnProperty(x)) continue; 4. console.log(x + " - " + person[x]); 5. } 6. 7. // name – John 8. // age - 20
  • 309. switch 1. var a = 0; 2. switch(a) { 3. case 0: 4. console.log('Bloco 0'); 5. break; 6. case 1: 7. console.log('Bloco 1'); 8. break; 9. } 10. 11. // Bloco 0
  • 311. Operadores Os operadores são divididos em aritméticos, atribuição, comparação, lógica e ternário. Assim como as estruturas condicionais e de repetição, são bem similares aos da linguagem Java
  • 312. Aritméticos 1. var y = 10; 2. 3. x = y + 2; // 12 4. x = y - 2; // 8 5. x = y * 2; // 20 6. x = y / 2; // 5 7. x = y % 2; // 0 8. x = ++y; // 11 9. x = y++; // 10 10. x = --y; // 9 11. x = y--; // 10
  • 313. Atribuição 1. var x = 10; 2. var y = 2; 3. 4. x += y; // 12 5. x -= y; // 8 6. x *= y; // 20 7. x /= y; // 5 8. x %= y; // 0
  • 314. Comparação 1. var x = 10; 2. 3. x == 10; // true 4. x != 10; // false 5. x === 10; // true 6. x !== 10; // false 7. x > 0; // true 8. x < 100; // true 9. x >=10; // true 10. x <=0; // false
  • 315. Lógica 1. (1 & 3); // 1 2. (1 | 2); // 3 3. (true && true); // true 4. (10 && 100); // 100 5. (true || false); // true 6. (10 || 0); // 10 7. !(x == y); // true 8. !!(x); // true
  • 316. Ternário 1. var idade = 20; 2. var situacao = (idade > 18) ? "Maior" : "Menor"; // "Maior"
  • 318. Tratamento de erros O tratamento de erros é feito por meio do lançamento e captura de objetos de erro, utilizando as palavras reservadas throw, try e catch
  • 319. Ao lançar um erro, o fluxo de execução é interrompido até alcançar um bloco try e catch, onde o erro será tratado
  • 320. O que é um erro? Apesar de ser possível lançar qualquer tipo de dado, é recomendado que sejam lançados apenas objetos contendo nome e a mensagem de erro var erro = { name: "Nome do erro", message: "Descrição do erro" }
  • 321. Criando um erro 1. var illegalArgumentError = function (message) { 2. return { 3. name: "IllegalArgumentError", 4. message: message 5. }; 6. };
  • 322. Lançando os erros 1. var illegalArgumentError = function (message) { 2. return { 3. name: "IllegalArgumentError", 4. message: message 5. }; 6. }; 7. var calcularDesconto = function (quantidade, valor) { 8. if (quantidade === 0) throw illegalArgumentError ("Quantidade zero"); 9. if (valor < 0) throw illegalArgumentError("Valor negativo"); 10. // Código de cálculo do desconto 11. };
  • 323. Tratando os erros 1. var illegalArgumentError = function (message) { 2. return { 3. name: "IllegalArgumentError", 4. message: message 5. }; 6. }; 7. var calcularDesconto = function (quantidade, valor) { 8. if (quantidade === 0) throw illegalArgumentError ("Quantidade zero"); 9. if (valor < 0) throw illegalArgumentError("Valor negativo"); 10. // Código de cálculo do desconto 11. }; 12. try { 13. calcularDesconto(0, 100); 14. } catch (e) { 15. console.log(e.message); 16. }
  • 324. Testes
  • 326. Herança A herança é utilizada principalmente para promover o reuso. Em JavaScript, ela é feita com base em protótipos, não em classes, como em outras linguagens. Isso se deve a suas raízes na linguagem Self.
  • 327. 1. var pessoa1 = { 2. nome: "João", 3. idade: 20, 4. toString: function () { 5. return this.nome + " tem " + this.idade + " anos"; 6. } 7. };
  • 328. 1. var pessoa1 = { 2. nome: "João", 3. idade: 20, 4. toString: function () { 5. return this.nome + " tem " + this.idade + " anos"; 6. } 7. }; 8. 9. pessoa1.toString(); // João tem 20 anos
  • 329. 1. var pessoa1 = { 2. nome: "João", 3. idade: 20, 4. toString: function () { 5. return this.nome + " tem " + this.idade + " anos"; 6. } 7. }; 8. 9. var pessoa2 = { 10. nome: "Pedro", 11. idade: 16, 12. toString: function () { 13. return this.nome + " tem " + this.idade + " anos"; 14. } 15. }; 16. 17. pessoa1.toString(); // João tem 20 anos
  • 330. 1. var pessoa1 = { 2. nome: "João", 3. idade: 20, 4. toString: function () { 5. return this.nome + " tem " + this.idade + " anos"; 6. } 7. }; 8. 9. var pessoa2 = { 10. nome: "Pedro", 11. idade: 16, 12. toString: function () { 13. return this.nome + " tem " + this.idade + " anos"; 14. } 15. }; 16. 17. pessoa1.toString(); // João tem 20 anos 18. pessoa2.toString(); // Pedro tem 16 anos
  • 331. 1. var pessoa1 = { 2. nome: "João", 3. idade: 20, 4. toString: function () { 5. return this.nome + " tem " + this.idade + " anos"; 6. } 7. }; 8. 9. var pessoa2 = { 10. nome: "Pedro", 11. idade: 16, 12. toString: function () { 13. return this.nome + " tem " + this.idade + " anos"; 14. } 15. }; 16. 17. pessoa1.toString(); // João tem 20 anos 18. pessoa2.toString(); // Pedro tem 16 anos
  • 332. 1. 2. pessoa1.toString(); // João tem 20 anos 3. pessoa2.toString(); // Pedro tem 16 anos
  • 333. 1. var pessoa = { 2. toString: function () { 3. return this.nome + " tem " + this.idade + " anos"; 4. } 5. }; 6. 7. pessoa1.toString(); // João tem 20 anos 8. pessoa2.toString(); // Pedro tem 16 anos
  • 334. 1. var pessoa = { 2. toString: function () { 3. return this.nome + " tem " + this.idade + " anos"; 4. } 5. }; 6. 7. var pessoa1 = Object.create(pessoa); 8. pessoa1.nome = "João"; 9. pessoa1.idade = 20; 10. 11. pessoa1.toString(); // João tem 20 anos 12. pessoa2.toString(); // Pedro tem 16 anos
  • 335. 1. var pessoa = { 2. toString: function () { 3. return this.nome + " tem " + this.idade + " anos"; 4. } 5. }; 6. 7. var pessoa1 = Object.create(pessoa); 8. pessoa1.nome = "João"; 9. pessoa1.idade = 20; 10. 11. var pessoa2 = Object.create(pessoa); 12. pessoa2.nome = "Pedro"; 13. pessoa2.idade = 16; 14. 15. pessoa1.toString(); // João tem 20 anos 16. pessoa2.toString(); // Pedro tem 16 anos
  • 336. 1. var pessoa = { 2. toString: function () { 3. return this.nome + " tem " + this.idade + " anos"; 4. } 5. }; 6. 7. var pessoa1 = Object.create(pessoa); 8. pessoa1.nome = "João"; 9. pessoa1.idade = 20; 10. 11. var pessoa2 = Object.create(pessoa); 12. pessoa2.nome = "Pedro"; 13. pessoa2.idade = 16; 14. 15. pessoa1.toString(); // João tem 20 anos 16. pessoa2.toString(); // Pedro tem 16 anos
  • 337. 1. var pessoa = { 2. toString: function () { 3. return this.nome + " tem " + this.idade + " anos"; 4. } 5. }; 6. 7. var pessoa1 = Object.create(pessoa); 8. 9. var pessoa2 = Object.create(pessoa); 10. 11. pessoa1.toString(); // João tem 20 anos 12. pessoa2.toString(); // Pedro tem 16 anos
  • 338. 1. var pessoa = { 2. constructor: function () { 3. }, 4. toString: function () { 5. return this.nome + " tem " + this.idade + " anos"; 6. } 7. }; 8. 9. var pessoa1 = Object.create(pessoa); 10. 11. var pessoa2 = Object.create(pessoa); 12. 13. pessoa1.toString(); // João tem 20 anos 14. pessoa2.toString(); // Pedro tem 16 anos
  • 339. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var pessoa1 = Object.create(pessoa); 12. 13. var pessoa2 = Object.create(pessoa); 14. 15. pessoa1.toString(); // João tem 20 anos 16. pessoa2.toString(); // Pedro tem 16 anos
  • 340. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var pessoa1 = Object.create(pessoa); 12. pessoa1.constructor("João", 20); 13. 14. var pessoa2 = Object.create(pessoa); 15. pessoa2.constructor("Pedro", 16); 16. 17. pessoa1.toString(); // João tem 20 anos 18. pessoa2.toString(); // Pedro tem 16 anos
  • 341. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var funcionario = Object.create(pessoa); 12. funcionario.toString = function () { 13. return this.nome + " tem " + this.idade + " anos e é funcionário"; 14. }; 15. 16. var pessoa1 = Object.create(pessoa); 17. pessoa1.constructor("João", 20); 18. 19. var pessoa2 = Object.create(funcionario); 20. pessoa2.constructor("Pedro", 16); 21. 22. pessoa1.toString(); // João tem 20 anos 23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
  • 342. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var funcionario = Object.create(pessoa); 12. funcionario.toString = function () { 13. return this.nome + " tem " + this.idade + " anos e é funcionário"; 14. }; 15. 16. var pessoa1 = Object.create(pessoa); 17. pessoa1.constructor("João", 20); 18. 19. var pessoa2 = Object.create(funcionario); 20. pessoa2.constructor("Pedro", 16); 21. 22. pessoa1.toString(); // João tem 20 anos 23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
  • 343. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var funcionario = Object.create(pessoa); 12. funcionario.toString = function () { 13. 14. }; 15. 16. var pessoa1 = Object.create(pessoa); 17. pessoa1.constructor("João", 20); 18. 19. var pessoa2 = Object.create(funcionario); 20. pessoa2.constructor("Pedro", 16); 21. 22. pessoa1.toString(); // João tem 20 anos 23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
  • 344. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var funcionario = Object.create(pessoa); 12. funcionario.toString = function () { 13. return pessoa.toString() + " e é funcionário"; 14. }; 15. 16. var pessoa1 = Object.create(pessoa); 17. pessoa1.constructor("João", 20); 18. 19. var pessoa2 = Object.create(funcionario); 20. pessoa2.constructor("Pedro", 16); 21. 22. pessoa1.toString(); // João tem 20 anos 23. pessoa2.toString(); // undefined tem undefined anos e é funcionário
  • 345. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var funcionario = Object.create(pessoa); 12. funcionario.toString = function () { 13. return pessoa.toString.call(this) + " e é funcionário"; 14. }; 15. 16. var pessoa1 = Object.create(pessoa); 17. pessoa1.constructor("João", 20); 18. 19. var pessoa2 = Object.create(funcionario); 20. pessoa2.constructor("Pedro", 16); 21. 22. pessoa1.toString(); // João tem 20 anos 23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
  • 346. 1. var pessoa = { 2. constructor: function (nome, idade) { 3. this.nome = nome; 4. this.idade = idade; 5. }, 6. toString: function () { 7. return this.nome + " tem " + this.idade + " anos"; 8. } 9. }; 10. 11. var funcionario = Object.create(pessoa); 12. funcionario.toString = function () { 13. return pessoa.toString.call(this) + " e é funcionário"; 14. }; 15. 16. var pessoa1 = Object.create(pessoa); 17. pessoa1.constructor("João", 20); 18. 19. var pessoa2 = Object.create(funcionario); 20. pessoa2.constructor("Pedro", 16); 21. 22. pessoa1.toString(); // João tem 20 anos 23. pessoa2.toString(); // Pedro tem 16 anos e é funcionário
  • 347. JSON
  • 350. O Strict Mode foi introduzido na versão 5 do ECMAScript e quando habilitado torna o inerpretador mais exigente, lançando erros em determinadas situações, que antes não eram lançados. Podemos aplicá-lo a todo o script, ou a uma função específica.
  • 351. 1. "use strict"; 2. nome = "João"; // name is not defined
  • 352. 1. "use strict"; 2. var pessoa= {nome: "João", nome: "João"}; // Duplicate data property in object literal not allowed in strict mode
  • 353. 1. "use strict"; 2. a + b + c; // a is not defined
  • 354. O que a linguagem tem de ruim?
  • 356. Para que servem as variáveis globais na linguagem JavaScript?
  • 357. Como a linguagem não possui um ligador, ou linker, faz uso de variáveis globais para estabelecer vínculos entre os diferentes artefatos partencentes a uma aplicação
  • 358. O grande problema com as variáveis globais é a poluição
  • 359. NaN (Not a Number)
  • 360. Caso ocorra algum problema em uma conversão ou operação matemática, o valor NaN, que significa not a number, é retornado sem qualquer outra notificação do que pode ter ocorrido
  • 361. typeof
  • 362. A linguagem produz alguns resultados estranhos ao ser questionada sobre alguns tipos como null, RegExp e NaN
  • 363. var a = null; typeof a; // 'object' var b = NaN; typeof b; // 'number' var c = /./; typeof c; // 'object' var d = [1, 2, 3, 4, 5 ,6]; typeof d; // 'object'
  • 365. Infelizmente, a linguagem assume o estado de determinados tipos como true ou false, sem existir uma estratégia consistente para dar suporte a decisão
  • 366. 0 // false NaN // false '' // false false // false null // false undefined // false
  • 368. O comportamento dos operadores == e != apresenta problemas relacionados a coersão de tipos, produzindo resultados indesejados
  • 369. > '' == '0' false
  • 370. > '' == '0' false > '' == 0 true
  • 371. > '' == '0' false > '' == 0 true > 0 == '0' true
  • 372. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false
  • 373. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false
  • 374. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false > null == undefined true
  • 375. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false > null == undefined true > NaN == null false
  • 376. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false > null == undefined true > NaN == null false > NaN == NaN false
  • 377. Utilize apenas os operadores === e !==
  • 378. Operações com ponto flutuante
  • 379. A linguagem possui apenas um tipo de número, 64-bit floating point. Operações simples como soma e substração podem ter resultados indesejados
  • 380. 0.1 + 0.2 = 0.30000000000000004
  • 382. Apesar de parecer uma vantagem, a inserção automática de ; pode trazer inúmeros problemas semânticos
  • 383. Qual é a diferença entre os trechos de código abaixo: return { status: true }; return { status: true };
  • 385. Existem muitas palavras reservadas, algumas delas vindas da linguagem Java, e a maior parte delas não são utilizadas: abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with
  • 386. var method; // ok var class; // illegal object = {box: value}; // ok object = {case: value}; // illegal object = {'case': value}; // ok object.box = value; // ok object.case = value; // illegal object['case'] = value; // ok
  • 388. Apesar da sintaxe semelhante ao Java, ao escrever um bloco, como em uma estrutura de decisão, o escopo de declaração não é isolado
  • 389. Qual é o resultado do código abaixo? var a = true; if (a) { var x = "Hello World"; } console.log(a); // true console.log(x); // "Hello World";
  • 390. Evite utilizar a função eval
  • 392. JavaScript faz parte ou tem qualquer relação com a linguagem Java
  • 393. JavaScript faz parte ou tem qualquer relação com a linguagem Java
  • 394. JavaScript é uma linguagem considerada inferior e não deve ser utilizada em aplicações profissionais
  • 395. JavaScript é uma linguagem considerada inferior e não deve ser utilizada em aplicações profissionais
  • 396. JavaScript só pode ser utilizada dentro de um browser
  • 397. JavaScript só pode ser utilizada dentro de um browser
  • 398. A linguagem tem diversos problemas e se comporta de forma diferente dependendo do browser
  • 399. A linguagem tem diversos problemas e se comporta de forma diferente dependendo do browser
  • 400. JavaScript não é orientado a objetos como outras linguagens
  • 401. JavaScript não é orientado a objetos como outras linguagens
  • 402. Declaração comentada Muito comum e utilizada em 1996 1. <html> 2. <head> 3. <script> 4. <!-- function somar(a, b) { 5. return a + b; 6. } --> 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  • 403. Declaração comentada Muito comum e utilizada em 1996 1. <html> 2. <head> 3. <script> 4. <!-- function somar(a, b) { 5. return a + b; 6. } --> 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  • 404. Atributo language Utilizado em uma época em que existiam outros dialetos como o vbscript 1. <html> 2. <head> 3. <script language="javascript"> 4. function somar(a, b) { 5. return a + b; 6. } 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  • 405. Atributo language Utilizado em uma época em que existiam outros dialetos como o vbscript 1. <html> 2. <head> 3. <script language="javascript"> 4. function somar(a, b) { 5. return a + b; 6. } 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  • 406. Atributo type Definição do tipo do formato do script 1. <html> 2. <head> 3. <script type="text/javascript"> 4. function somar(a, b) { 5. return a + b; 6. } 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  • 407. Atributo type Definição do tipo do formato do script 1. <html> 2. <head> 3. <script type="text/javascript"> 4. function somar(a, b) { 5. return a + b; 6. } 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  • 408. Local da declaração Qual é o melhor lugar para declarar os scripts? 1. <html> 2. <head> 3. </head> 4. <body> 5. <script src="script.js" type="text/javascript"></script> 6. </body> 7. </html>
  • 409. Local da declaração Qual é o melhor lugar para declarar os scripts? 1. <html> 2. <head> 3. </head> 4. <body> 5. <script src="script.js" type="text/javascript"></script> 6. </body> 7. </html>

Notas do Editor

  1. Desmotivação
  2. Desmotivado
  3. Desmotivado
  4. Qual é a sua obra?
  5. Desmotivação
  6. Desmotivação
  7. Desmotivação
  8. Desmotivação
  9. Desmotivação
  10. Desmotivação
  11. Desmotivação
  12. Desmotivação
  13. Desmotivação
  14. Desmotivação
  15. Desmotivação
  16. Desmotivação
  17. Desmotivação
  18. Desmotivação
  19. Desmotivação
  20. Desmotivação
  21. Desmotivação
  22. Desmotivação
  23. Desmotivação
  24. Desmotivação
  25. Desmotivação
  26. Desmotivação
  27. Desmotivação
  28. Desmotivação
  29. Desmotivação
  30. Desmotivação
  31. Desmotivação
  32. Desmotivação
  33. Desmotivação
  34. Desmotivação
  35. Desmotivação
  36. Desmotivação
  37. Desmotivação
  38. Desmotivação
  39. Desmotivação
  40. Desmotivação
  41. Desmotivação
  42. Desmotivação
  43. Desmotivação
  44. Desmotivação
  45. Desmotivação
  46. Desmotivação
  47. Desmotivação
  48. Desmotivação
  49. Desmotivação
  50. Desmotivação
  51. Desmotivação
  52. Desmotivação
  53. Desmotivação
  54. Desmotivação
  55. Desmotivação
  56. Desmotivação
  57. Desmotivação
  58. Desmotivação
  59. Desmotivação
  60. Desmotivação
  61. Desmotivação
  62. Desmotivação
  63. Desmotivação
  64. Desmotivação
  65. Desmotivação
  66. Desmotivação
  67. Desmotivação
  68. Desmotivação
  69. Desmotivação
  70. Desmotivação
  71. Desmotivação
  72. Desmotivação
  73. Desmotivação
  74. Desmotivação
  75. Desmotivação
  76. Desmotivação
  77. Desmotivação
  78. Desmotivação
  79. Desmotivação
  80. Desmotivação
  81. Desmotivação
  82. Desmotivação
  83. Desmotivação
  84. Desmotivação
  85. Desmotivação
  86. Desmotivação
  87. Desmotivação
  88. Desmotivação
  89. Desmotivação
  90. Desmotivação
  91. Desmotivação
  92. Desmotivação
  93. Desmotivação
  94. Desmotivação
  95. Desmotivação
  96. Desmotivação
  97. Desmotivação
  98. Desmotivação
  99. Desmotivação
  100. Desmotivação
  101. Desmotivação
  102. Desmotivação
  103. Desmotivação
  104. Desmotivação
  105. Desmotivação
  106. Desmotivação
  107. Desmotivação
  108. Desmotivação
  109. Desmotivação
  110. Desmotivação
  111. Desmotivação
  112. Desmotivação
  113. Desmotivação
  114. Desmotivação
  115. Desmotivação
  116. Desmotivação
  117. Desmotivação
  118. Desmotivação
  119. Desmotivação
  120. Desmotivação
  121. Desmotivação
  122. Desmotivação
  123. Desmotivação
  124. Desmotivação
  125. Desmotivação
  126. Desmotivação
  127. Desmotivação
  128. Desmotivação
  129. Desmotivação
  130. Desmotivação
  131. Desmotivação
  132. Desmotivação
  133. Desmotivação
  134. Desmotivação
  135. Desmotivação
  136. Desmotivação
  137. Desmotivação
  138. Desmotivação
  139. Desmotivação
  140. Desmotivação
  141. Desmotivação
  142. Desmotivação
  143. Desmotivação
  144. Desmotivação
  145. Desmotivação
  146. Desmotivação
  147. Desmotivação
  148. Desmotivação
  149. Desmotivação
  150. Desmotivação
  151. Desmotivação
  152. Desmotivação
  153. Desmotivação
  154. Desmotivação
  155. Desmotivação
  156. Desmotivação
  157. Desmotivação
  158. Desmotivação
  159. Desmotivação
  160. Desmotivação
  161. Desmotivação
  162. Desmotivação
  163. Desmotivação
  164. Desmotivação
  165. Desmotivação
  166. Desmotivação
  167. Desmotivação
  168. Desmotivação
  169. Desmotivação
  170. Desmotivação
  171. Desmotivação
  172. Desmotivação
  173. Desmotivação
  174. Desmotivação
  175. Desmotivação
  176. Desmotivação
  177. Desmotivação
  178. Desmotivação
  179. Desmotivação
  180. Desmotivação
  181. Desmotivação
  182. Desmotivação
  183. Desmotivação
  184. Desmotivação
  185. Desmotivação
  186. Desmotivação
  187. Desmotivação
  188. Desmotivação
  189. Desmotivação
  190. Desmotivação
  191. Desmotivação
  192. Desmotivação
  193. Desmotivação
  194. Desmotivação
  195. Desmotivação
  196. Desmotivação
  197. Desmotivação
  198. Desmotivação
  199. Desmotivação
  200. Desmotivação
  201. Desmotivação
  202. Desmotivação
  203. Desmotivação
  204. Desmotivação
  205. Desmotivação
  206. Desmotivação
  207. Desmotivação
  208. Desmotivação
  209. Desmotivação
  210. Desmotivação
  211. Desmotivação
  212. Desmotivação
  213. Desmotivação
  214. Desmotivação
  215. Desmotivação
  216. Desmotivação
  217. Desmotivação
  218. Desmotivação
  219. Desmotivação
  220. Desmotivação
  221. Desmotivação
  222. Desmotivação
  223. Desmotivação
  224. Desmotivação
  225. Desmotivação
  226. Desmotivação
  227. Desmotivação
  228. Desmotivação
  229. Desmotivação
  230. Desmotivação
  231. Desmotivação
  232. Desmotivação
  233. Desmotivação
  234. Desmotivação
  235. Desmotivação
  236. Desmotivação
  237. Desmotivação
  238. Desmotivação
  239. Desmotivação
  240. Desmotivação
  241. Desmotivação
  242. Desmotivação
  243. Desmotivação
  244. Desmotivação
  245. Desmotivação
  246. Desmotivação
  247. Desmotivação
  248. Desmotivação
  249. Desmotivação
  250. Desmotivação
  251. Desmotivação
  252. Desmotivação
  253. Desmotivação
  254. Desmotivação
  255. Desmotivação
  256. Desmotivação
  257. Desmotivação
  258. Desmotivação
  259. Desmotivação
  260. Desmotivação
  261. Desmotivação
  262. Desmotivação
  263. Desmotivação
  264. Desmotivação
  265. Desmotivação
  266. Desmotivação
  267. Desmotivação
  268. Desmotivação
  269. Desmotivação
  270. Desmotivação
  271. Desmotivação
  272. Desmotivação
  273. Desmotivação
  274. Desmotivação
  275. Desmotivação
  276. Desmotivação
  277. Desmotivação
  278. Desmotivação
  279. Desmotivação
  280. Desmotivação
  281. Desmotivação
  282. Desmotivação
  283. Desmotivação
  284. Desmotivação
  285. Desmotivação
  286. Desmotivação
  287. Desmotivação
  288. Desmotivação
  289. Desmotivação
  290. Desmotivação
  291. Desmotivação
  292. Desmotivação
  293. Desmotivação
  294. Desmotivação
  295. Desmotivação
  296. Desmotivação
  297. Desmotivação
  298. Desmotivação
  299. Desmotivação
  300. Desmotivação
  301. Desmotivação
  302. Desmotivação
  303. Desmotivação
  304. Desmotivação
  305. Desmotivação
  306. Desmotivação
  307. Desmotivação
  308. Desmotivação
  309. Desmotivação
  310. Desmotivação
  311. Desmotivação
  312. Desmotivação
  313. Desmotivação
  314. Desmotivação
  315. Desmotivação
  316. Desmotivação
  317. Desmotivação
  318. Desmotivação
  319. Desmotivação
  320. Desmotivação
  321. Desmotivação
  322. Desmotivação
  323. Desmotivação
  324. Desmotivação
  325. Desmotivação
  326. Desmotivação
  327. Desmotivação
  328. Desmotivação
  329. Desmotivação
  330. Desmotivação
  331. Desmotivação
  332. Desmotivação
  333. Desmotivação
  334. Desmotivação
  335. Desmotivação
  336. Desmotivação
  337. Desmotivação
  338. Desmotivação
  339. Desmotivação
  340. Desmotivação
  341. Desmotivação
  342. Desmotivação
  343. Desmotivação
  344. Desmotivação
  345. Desmotivação
  346. Desmotivação
  347. Desmotivação
  348. Desmotivação
  349. Desmotivação
  350. Desmotivação
  351. Desmotivação
  352. Desmotivação
  353. Desmotivação
  354. Desmotivação
  355. Desmotivação
  356. Desmotivação
  357. Desmotivação
  358. Desmotivação
  359. Desmotivação
  360. Desmotivação
  361. Desmotivação
  362. Desmotivação
  363. Desmotivação
  364. Desmotivação
  365. Desmotivação
  366. Desmotivação
  367. Desmotivação
  368. Desmotivação
  369. Desmotivação
  370. Desmotivação
  371. Desmotivação
  372. Desmotivação
  373. Desmotivação
  374. Desmotivação
  375. Desmotivação
  376. Desmotivação
  377. Desmotivação
  378. Desmotivação
  379. Desmotivação
  380. Desmotivação
  381. Desmotivação
  382. Desmotivação
  383. Desmotivação
  384. Desmotivação
  385. Desmotivação
  386. Desmotivação
  387. Desmotivação
  388. Desmotivação
  389. Desmotivação
  390. Desmotivação
  391. Desmotivação
  392. Desmotivação
  393. Desmotivação
  394. Desmotivação
  395. Desmotivação
  396. Desmotivação