Desvendando a linguagem JavaScript

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!

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?

"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

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

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

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

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;

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!

> 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

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

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 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

O tipo undefined é retornado caso uma propriedade de um determinado objeto seja consultada e não exista

O tipo null indica a ausência de valor em uma determinada propriedade já existente

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;

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

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.

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 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

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 = 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. };

Podemos distribuir o código por meio de um objeto utilizando uma função fábrica

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 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. };

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

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: 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. }; 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. }; 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();

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

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 = /(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) 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) 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

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 = /<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>(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 = /(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}/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...

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 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 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. }

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

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?

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

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

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'

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

O comportamento dos operadores == e != apresenta problemas relacionados a coersão de tipos, produzindo resultados indesejados

> '' == '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

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

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

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 só pode ser utilizada dentro de um browser

A linguagem tem diversos problemas e se comporta de forma diferente dependendo do browser

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

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>

Desvendando a linguagem JavaScript

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Desvendando a linguagem JavaScript

Mais de Rodrigo Branas

Desvendando a linguagem JavaScript

Notas do Editor