Desvendando a linguagem JavaScript

13.435 visualizações

Publicada em

Introdução a linguagem JavaScript desvendando a história e as principais características da linguagem.

Assista a série Desvendando a linguagem JavaScript no meu canal no YouTube: https://www.youtube.com/user/rodrigobranas/videos

Publicada em: Tecnologia
3 comentários
90 gostaram
Estatísticas
Notas
  • @Edy Segura Estimado Edy, muito obrigado pelo feedback! Sobre os contrutores, os vídeos do James Shore são excepcionais, já havia assistido antes. Não quero estender muito a discussão por aqui, mas a linguagem JavaScript de fato não possui construtores, como aqueles que estamos acostumados em Java e outras linguagens que possuem Classe. O que existe é uma propriedade chamada constructor, que referencia a função construtora que deu origem ao objeto. Abraços e obrigado novamente!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Olá Rodrigo!! Primeiramente quero agradecer pelo compartilhamento do conhecimento que você vem praticando!! O material que você está produzindo, na minha opinião, é de excelente qualidade!! Apenas uma observação, no slide 105 desta apresentação você comentou que o JavaScript não possui construtor. Para que você possa reavaliar este conceito recomendo um excelente vídeo sobre Orientação a Objetos em JavaScript: https://www.youtube.com/watch?v=PMfcsYzj-9M. Mais uma vez obrigado por compartilhar o seu conhecimento com a gente! Abraços.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • muito bom o conteudo...
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
13.435
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4.828
Ações
Compartilhamentos
0
Downloads
0
Comentários
3
Gostaram
90
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Desmotivação
  • Desmotivado
  • Desmotivado
  • Qual é a sua obra?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desvendando a linguagem JavaScript

    1. 1. Desvendando a linguagem JavaScript Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
    2. 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. 3. Acompanhe a série Desvendando a linguagem JavaScript pelo YouTube em: http://www.youtube.com/rodrigobranas
    4. 4. JavaScript é uma das linguagens mais populares do mundo!
    5. 5. Mas ao mesmo tempo é uma das linguagens mais odiadas!
    6. 6. Alguém aqui odeia JavaScript?
    7. 7. Boa parte dos problemas tem relação direta com a DOM, não com a linguagem
    8. 8. 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.
    9. 9. Você costuma ler o manual antes de utilizar um produto que comprou?
    10. 10. "A linguagem JavaScript é a única que as pessoas acham que não precisam aprender antes de começar a utilizar" (Douglas Crockford)
    11. 11. O problema é que ela é utiliza conceitos bem diferentes das outras linguagens que estamos acostumados!
    12. 12. Era uma vez, uma linguagem de programação chamada HyperTalk
    13. 13. A linguagem foi criada por Dan Winkler em 1987 para a plataforma HyperCard da Apple
    14. 14. 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
    15. 15. A Netscape teve a ideia de implementar um conceito semelhante!
    16. 16. Então, contrataram Brendan Eich para essa difícil missão!
    17. 17. Na ocasião, pelo sua afinidade com a linguagem Scheme, ele propos utilizá-la
    18. 18. Até que um dia, alguém na Netscape descobriu o que era Scheme!
    19. 19. 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)
    20. 20. Com base no público alvo, a linguagem precisava ser baseada em algo mais popular
    21. 21. Brendan Eich utilizou como base as linguagens Java, Scheme, Self e com algumas influências de Perl
    22. 22. 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
    23. 23. Seu primeiro nome foi Mocha, por sugestão de Marc Andreessen, fundador da Netscape
    24. 24. A linguagem foi lançada oficialmente em Setembro de 1995 com o nome de LiveScript na versão beta do Netscape Navigator 2.0
    25. 25. Browser's World War
    26. 26. 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
    27. 27. O nome JavaScript, foi registrado como uma marca pertencente a Sun e era de uso exclusivo da Netscape
    28. 28. A Microsoft fez uma engenharia reversa da linguagem da Netscape, criando a linguagem JScript
    29. 29. 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
    30. 30. Em 1997, após algumas tentativas, a Netscape conseguiu padronizar a linguagem junto a ECMA Internacional, nomeando-a ECMAScript
    31. 31. Características da linguagem JavaScript
    32. 32. • A linguagem JavaScript é interpretada
    33. 33. • A linguagem JavaScript é interpretada • Possui orientação a objetos baseada em protótipos, não possuindo classes
    34. 34. • 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
    35. 35. • 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
    36. 36. • 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
    37. 37. • 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
    38. 38. Variáveis
    39. 39. As variáveis devem ser criadas seguindo as regras: • Devem começar por uma letra, $ ou _
    40. 40. 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
    41. 41. 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
    42. 42. 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
    43. 43. 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;
    44. 44. Number
    45. 45. 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
    46. 46. Só existe um tipo numérico na linguagem e ele tem as seguintes características: • IEEE-754 (Standard for Floating-Point)
    47. 47. 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
    48. 48. 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!
    49. 49. > 0.1 + 0.2
    50. 50. > 0.1 + 0.2 0.30000000000000004
    51. 51. > 0.1 + 0.2 0.30000000000000004 > 3 / 0
    52. 52. > 0.1 + 0.2 0.30000000000000004 > 3 / 0 Infinity
    53. 53. > 0.1 + 0.2 0.30000000000000004 > 3 / 0 Infinity > "AgileCode" * 10;
    54. 54. > 0.1 + 0.2 0.30000000000000004 > 3 / 0 Infinity > "AgileCode" * 10; NaN
    55. 55. 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
    56. 56. String
    57. 57. Uma String é composta por uma sequência de 0 ou mais caracteres com as seguintes características: • São imutáveis
    58. 58. 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
    59. 59. 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', ''];
    60. 60. 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
    61. 61. Boolean
    62. 62. Criando um Boolean 1. var isento = true; 2. var estudante = false; 3. 4. isento.toString(); // "true" 5. estudante.valueOf(); // false
    63. 63. Cuidado com os perigosos e confusos tipos truthy e falsy
    64. 64. A linguagem JavaScript assume o estado de determinados tipos como true ou false, dependendo do caso.
    65. 65. > !!0
    66. 66. > !!0 false
    67. 67. > !!0 false > !!NaN
    68. 68. > !!0 false > !!NaN false
    69. 69. > !!0 false > !!NaN false > !!''
    70. 70. > !!0 false > !!NaN false > !!'' false
    71. 71. > !!0 false > !!NaN false > !!'' false > !!false
    72. 72. > !!0 false > !!NaN false > !!'' false > !!false false
    73. 73. > !!0 false > !!NaN false > !!'' false > !!false false > !!null
    74. 74. > !!0 false > !!NaN false > !!'' false > !!false false > !!null false
    75. 75. > !!0 false > !!NaN false > !!'' false > !!false false > !!null false > !!undefined
    76. 76. > !!0 false > !!NaN false > !!'' false > !!false false > !!null false > !!undefined false
    77. 77. Todos os outros são truthy por padrão
    78. 78. undefined
    79. 79. O tipo undefined é retornado caso uma propriedade de um determinado objeto seja consultada e não exista
    80. 80. null
    81. 81. O tipo null indica a ausência de valor em uma determinada propriedade já existente
    82. 82. Object
    83. 83. 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.
    84. 84. Criando um Object 1. var pessoa = {};
    85. 85. Adicionando propriedades ao objeto 1. var pessoa = { 2. nome: "João", 3. };
    86. 86. Adicionando propriedades ao objeto 1. var pessoa = { 2. nome: "João", 3. idade: 20, 4. };
    87. 87. Adicionando propriedades ao objeto 1. var pessoa = { 2. nome: "João", 3. idade: 20, 4. telefone: null, 5. };
    88. 88. 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. };
    89. 89. 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;
    90. 90. 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
    91. 91. Apagando propriedades de um objeto 1. delete pessoa.telefone;
    92. 92. Function
    93. 93. A linguagem JavaScript não tem:
    94. 94. A linguagem JavaScript não tem: • Classe
    95. 95. A linguagem JavaScript não tem: • Classe • Construtor
    96. 96. A linguagem JavaScript não tem: • Classe • Construtor • Método
    97. 97. A linguagem JavaScript não tem: • Classe • Construtor • Método • Módulo
    98. 98. Mas tem Função!
    99. 99. As funções são responsáveis pelo poder da linguagem JavaScript
    100. 100. Uma função é um objeto que contém um bloco de código executável.
    101. 101. Esse bloco é isolado, não sendo possível acessá-lo externamente
    102. 102. Na linguagem JavaScript, as funções são de primeira classe
    103. 103. 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.
    104. 104. Criando funções
    105. 105. Function Declaration 1. function soma(a, b) { 2. return a + b; 3. }
    106. 106. Function Expression 1. var soma = function (a, b) { 2. return a + b; 3. }
    107. 107. 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. }
    108. 108. Qual é a diferença entre function declaration e expression?
    109. 109. 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. }
    110. 110. 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. };
    111. 111. Invocando uma função
    112. 112. Invocando uma função diretamente no escopo global
    113. 113. Invocando uma função diretamente 1. var soma = function (a, b) { 2. return a + b; 3. };
    114. 114. Invocando uma função diretamente 1. var soma = function (a, b) { 2. return a + b; 3. }; 4. 5. soma(2, 2); // 4
    115. 115. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150};
    116. 116. Passando uma função como parâmetro 1. var produto = {nome: 'Sapato', preco: 150}; 2. 3. var formulaImpostoA = function (preco) { return preco*0.1; };
    117. 117. 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. }
    118. 118. 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
    119. 119. 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
    120. 120. 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
    121. 121. Retornando uma função 1. var helloWorld = function () { 2. return function () { 3. return "Hello World!"; 4. }; 5. };
    122. 122. Retornando uma função 1. var helloWorld = function () { 2. return function () { 3. return "Hello World!"; 4. }; 5. }; 6. 7. helloWorld(); // [Fuction]
    123. 123. 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!'
    124. 124. Invocando uma função por meio de um Objeto
    125. 125. Existem métodos em JavaScript?
    126. 126. 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
    127. 127. 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
    128. 128. Invocando uma função com call e apply
    129. 129. 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)
    130. 130. 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
    131. 131. Invocando uma função por meio do operador new
    132. 132. Criando objetos diretamente 1. var pedro = {nome: "Pedro",idade: 20};
    133. 133. Criando objetos diretamente 1. var pedro = {nome: "Pedro",idade: 20}; 2. var maria = {nome: "Maria",idade: 30};
    134. 134. 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);
    135. 135. 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);
    136. 136. Não esqueça de utilizar o operador new quando utilizar funções construtoras
    137. 137. Closures
    138. 138. Criando uma função simples 1. var helloWorld = function () { 2. return "Hello World!"; 3. }; 4. 5. helloWorld; // [Function] 6. helloWorld(); // 'Hello World!'
    139. 139. 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]
    140. 140. 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!'
    141. 141. Escrevendo código reusável por meio de funções fábrica e construtora
    142. 142. O poder da orientação a objetos
    143. 143. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. };
    144. 144. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. };
    145. 145. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. return filme.diaria * dias; 4. };
    146. 146. 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
    147. 147. E se eu quiser reusar aquele trecho de código em outro lugar?
    148. 148. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. return filme.diaria * dias; 4. };
    149. 149. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = (dataDevolucao.getTime() - dataAluguel.getTime()) / (1000*60*60*24); 3. return filme.diaria * dias; 4. };
    150. 150. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = 3. return filme.diaria * dias; 4. };
    151. 151. 1. var calcularLocacao = function (filme, dataAluguel, dataDevolucao) { 2. var dias = calcularDiferencaEntreDuasDataEmDias(dataAluguel, dataDevolucao); 3. return filme.diaria * dias; 4. };
    152. 152. 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. };
    153. 153. 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. };
    154. 154. Podemos distribuir o código por meio de um objeto utilizando uma função fábrica
    155. 155. 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. };
    156. 156. 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. };
    157. 157. 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. };
    158. 158. 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. };
    159. 159. 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. };
    160. 160. 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. };
    161. 161. 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. };
    162. 162. 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. };
    163. 163. 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. };
    164. 164. 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. };
    165. 165. 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. };
    166. 166. 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. };
    167. 167. 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. };
    168. 168. 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
    169. 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. };
    170. 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 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
    171. 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 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
    172. 172. Se lembra da closure?
    173. 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. };
    174. 174. 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. };
    175. 175. 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. };
    176. 176. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
    177. 177. 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
    178. 178. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
    179. 179. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: function () { 4. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 5. } 6. }; 7. };
    180. 180. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: 4. }; 5. };
    181. 181. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: _calcularDiferencaEmDias 4. }; 5. };
    182. 182. 1. var criarPeriodo = function (inicio, fim) { 2. return { 3. calcularDiferencaEmDias: _calcularDiferencaEmDias 4. }; 5. };
    183. 183. 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. };
    184. 184. 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. };
    185. 185. 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
    186. 186. Também é possível utilizar uma função construtora
    187. 187. 1. var Periodo = function (inicio, fim) { 2. };
    188. 188. 1. var Periodo = function (inicio, fim) { 2. this.calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. };
    189. 189. 1. var Periodo = function (inicio, fim) { 2. this.calcularDiferencaEmDias = function () { 3. return (fim.getTime() - inicio.getTime()) / (1000*60*60*24); 4. }; 5. };
    190. 190. 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
    191. 191. Array Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
    192. 192. Não existem Arrays de verdade na linguagem JavaScript
    193. 193. Os Arrays são apenas objetos especiais que oferecem meios para acessar e manipular suas propriedades por meio de índices.
    194. 194. Criando um Array com [] 1. var carros = [];
    195. 195. Inserindo elementos no Array 1. var carros = []; 2. 3. a[0] = "Ka";
    196. 196. Inserindo elementos no Array 1. var carros = []; 2. 3. a[0] = "Ka"; 4. a[1] = "Corsa";
    197. 197. Inserindo elementos no Array 1. var carros = []; 2. 3. carros[0] = "Ka"; 4. carros[1] = "Corsa"; 5. carros[3] = "Palio";
    198. 198. Também é possível criar um Array inicializado com elementos 1. var carros = ["Ka", "Corsa", "Palio"];
    199. 199. Criando um Array com new Array() 1. var carros = new Array();
    200. 200. Criando um Array com new Array() 1. var carros = new Array();
    201. 201. Inicializando o Array com elementos 1. var carros = new Array("Ka", "Corsa", "Palio");
    202. 202. Também é possível inicializar o Array, com um tamanho inicial 1. var carros = new Array(10);
    203. 203. Não se esqueça que o Array não tem tamanho fixo e o tamanho inicial é apenas uma forma de inicializá-lo
    204. 204. 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
    205. 205. 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"]
    206. 206. 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"]
    207. 207. 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
    208. 208. 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"]
    209. 209. 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"]
    210. 210. 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"]
    211. 211. 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"]
    212. 212. 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
    213. 213. 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"]
    214. 214. 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"]
    215. 215. 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"]
    216. 216. 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. });
    217. 217. 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"}]
    218. 218. 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
    219. 219. 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
    220. 220. 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"]
    221. 221. 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
    222. 222. 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"]
    223. 223. 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"]
    224. 224. 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"]
    225. 225. 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"]
    226. 226. 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"
    227. 227. Expressões Regulares Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
    228. 228. As expressões regulares são estruturas formadas por uma sequência de caracteres que especificam um padrão formal
    229. 229. Validação de campos
    230. 230. Extração de dados
    231. 231. Substituição de caracteres em textos
    232. 232. Criando uma expressão regular 1. var regExp = /<expressão regular>/;
    233. 233. Criando uma expressão regular 1. var regExp = new RegExp("<expressão regular>");
    234. 234. RegExp API exec – Executa a RegExp, retornando os detalhes test – Testa a RegExp, retornando true ou false
    235. 235. 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!
    236. 236. 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']
    237. 237. Testando a expressão regular 1. var regExp = /9999-9999/; 2. 3. var telefone = "9999-9999"; 4. regExp.test(telefone); // true
    238. 238. 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?
    239. 239. Testando a expressão regular 1. var regExp = /9999-9999/; 2. 3. var telefone = "9999-9999"; 4. regExp.test(telefone); // true
    240. 240. Testando a expressão regular 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // false
    241. 241. Escapando caracteres especiais - A barra é utilizada antes de caracteres especiais, com o objetivo de escapá-los.
    242. 242. Escapando caracteres especiais 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // false
    243. 243. Escapando caracteres especiais 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
    244. 244. 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!
    245. 245. Iniciando e finalizando com um determinado caractere ^ - Inicia com um determinado caractere $ - Finaliza com um determinado caractere
    246. 246. 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
    247. 247. 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
    248. 248. Lidando com caracteres antes e depois 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
    249. 249. 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.
    250. 250. 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
    251. 251. Utilizando grupos de caracteres 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
    252. 252. Utilizando grupos de caracteres 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(80) 9977-8899"; 4. regExp.test(telefone); // false
    253. 253. 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
    254. 254. Telefone – Passo 5 Não é muito grupo? Para evitar a repetição exagerada de padrões em uma expressão regular, podemos utilizar quantificadores.
    255. 255. 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
    256. 256. 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
    257. 257. 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
    258. 258. 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.
    259. 259. 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
    260. 260. 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
    261. 261. 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
    262. 262. 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.
    263. 263. Quantificadores - Parte 2 Os quantificadores podem ser aplicados a caracteres, grupos, conjuntos ou metacaracteres. ? – Zero ou um * – Zero ou mais + – Um ou mais
    264. 264. 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
    265. 265. 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
    266. 266. 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
    267. 267. 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
    268. 268. Telefone – Passo 8 E se o telefone agora estiver em uma estrutura de tabela, como fazer para reconhecer cada linha?
    269. 269. 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
    270. 270. 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
    271. 271. 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
    272. 272. 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
    273. 273. Telefone – Passo 9 Em muitos casos, é possível substituir os grupos por metacaracteres específicos!
    274. 274. 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
    275. 275. 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
    276. 276. 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
    277. 277. 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
    278. 278. 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.
    279. 279. Telefone – Passo 10 Chegou a hora de extrair os telefones das linhas da tabela! Vamos extrair o telefone da primeira linha.
    280. 280. 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
    281. 281. 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
    282. 282. 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'
    283. 283. Telefone – Passo 11 Agora, vamos extrair o telefone de todas as linhas.
    284. 284. Modificadores i – Case-insensitive matching g – Global matching m – Multiline matching
    285. 285. 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'
    286. 286. 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']
    287. 287. 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']
    288. 288. 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)']
    289. 289. 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']
    290. 290. Telefone – Passo 12 Por fim, vamos substituir todos os telefones da tabela!
    291. 291. 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...
    292. 292. Date
    293. 293. 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);
    294. 294. 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
    295. 295. Estruturas Condicionais e de Repetição
    296. 296. 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
    297. 297. if/else 1. var a = 10; 2. if (a == 10) { 3. console.log("AgileCode"); 4. } else { 5. console.log("JavaScript"); 6. } 7. 8. // AgileCode
    298. 298. 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
    299. 299. 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
    300. 300. 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
    301. 301. 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
    302. 302. Operadores
    303. 303. 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
    304. 304. 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
    305. 305. 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
    306. 306. 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
    307. 307. 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
    308. 308. Ternário 1. var idade = 20; 2. var situacao = (idade > 18) ? "Maior" : "Menor"; // "Maior"
    309. 309. Tratamento de erros
    310. 310. 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
    311. 311. Ao lançar um erro, o fluxo de execução é interrompido até alcançar um bloco try e catch, onde o erro será tratado
    312. 312. 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" }
    313. 313. Criando um erro 1. var illegalArgumentError = function (message) { 2. return { 3. name: "IllegalArgumentError", 4. message: message 5. }; 6. };
    314. 314. 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. };
    315. 315. 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. }
    316. 316. Testes
    317. 317. Herança
    318. 318. 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.
    319. 319. 1. var pessoa1 = { 2. nome: "João", 3. idade: 20, 4. toString: function () { 5. return this.nome + " tem " + this.idade + " anos"; 6. } 7. };
    320. 320. 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
    321. 321. 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
    322. 322. 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
    323. 323. 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
    324. 324. 1. 2. pessoa1.toString(); // João tem 20 anos 3. pessoa2.toString(); // Pedro tem 16 anos
    325. 325. 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
    326. 326. 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
    327. 327. 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
    328. 328. 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
    329. 329. 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
    330. 330. 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
    331. 331. 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
    332. 332. 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
    333. 333. 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
    334. 334. 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
    335. 335. 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
    336. 336. 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
    337. 337. 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
    338. 338. 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
    339. 339. JSON
    340. 340. JavaScript Object Notation
    341. 341. use strict
    342. 342. 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.
    343. 343. 1. "use strict"; 2. nome = "João"; // name is not defined
    344. 344. 1. "use strict"; 2. var pessoa= {nome: "João", nome: "João"}; // Duplicate data property in object literal not allowed in strict mode
    345. 345. 1. "use strict"; 2. a + b + c; // a is not defined
    346. 346. O que a linguagem tem de ruim?
    347. 347. Variáveis globais
    348. 348. Para que servem as variáveis globais na linguagem JavaScript?
    349. 349. 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
    350. 350. O grande problema com as variáveis globais é a poluição
    351. 351. NaN (Not a Number)
    352. 352. 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
    353. 353. typeof
    354. 354. A linguagem produz alguns resultados estranhos ao ser questionada sobre alguns tipos como null, RegExp e NaN
    355. 355. 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'
    356. 356. Valores truthy e falsy
    357. 357. 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
    358. 358. 0 // false NaN // false '' // false false // false null // false undefined // false
    359. 359. Operadores de comparação
    360. 360. O comportamento dos operadores == e != apresenta problemas relacionados a coersão de tipos, produzindo resultados indesejados
    361. 361. > '' == '0' false
    362. 362. > '' == '0' false > '' == 0 true
    363. 363. > '' == '0' false > '' == 0 true > 0 == '0' true
    364. 364. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false
    365. 365. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false
    366. 366. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false > null == undefined true
    367. 367. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false > null == undefined true > NaN == null false
    368. 368. > '' == '0' false > '' == 0 true > 0 == '0' true > false == undefined false > false == null false > null == undefined true > NaN == null false > NaN == NaN false
    369. 369. Utilize apenas os operadores === e !==
    370. 370. Operações com ponto flutuante
    371. 371. 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
    372. 372. 0.1 + 0.2 = 0.30000000000000004
    373. 373. Inserção automática de ;
    374. 374. Apesar de parecer uma vantagem, a inserção automática de ; pode trazer inúmeros problemas semânticos
    375. 375. Qual é a diferença entre os trechos de código abaixo: return { status: true }; return { status: true };
    376. 376. Palavras reservadas não utilizadas
    377. 377. 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
    378. 378. 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
    379. 379. Escopo de declaração
    380. 380. 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
    381. 381. 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";
    382. 382. Evite utilizar a função eval
    383. 383. Mitos e Lendas
    384. 384. JavaScript faz parte ou tem qualquer relação com a linguagem Java
    385. 385. JavaScript faz parte ou tem qualquer relação com a linguagem Java
    386. 386. JavaScript é uma linguagem considerada inferior e não deve ser utilizada em aplicações profissionais
    387. 387. JavaScript é uma linguagem considerada inferior e não deve ser utilizada em aplicações profissionais
    388. 388. JavaScript só pode ser utilizada dentro de um browser
    389. 389. JavaScript só pode ser utilizada dentro de um browser
    390. 390. A linguagem tem diversos problemas e se comporta de forma diferente dependendo do browser
    391. 391. A linguagem tem diversos problemas e se comporta de forma diferente dependendo do browser
    392. 392. JavaScript não é orientado a objetos como outras linguagens
    393. 393. JavaScript não é orientado a objetos como outras linguagens
    394. 394. 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>
    395. 395. 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>
    396. 396. 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>
    397. 397. 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>
    398. 398. 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>
    399. 399. 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>
    400. 400. 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>
    401. 401. 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>

    ×