TDC 2011 Goiânia: Evolução da linguagem de programação JavaScript

1,772 views
1,701 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,772
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

TDC 2011 Goiânia: Evolução da linguagem de programação JavaScript

  1. 1. Rogério Moraes de CarvalhoVITA Informática@rogeriomcrogeriomc.wordpress.com
  2. 2. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  3. 3. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  4. 4. O que é JavaScript?A linguagem Linguagem de scripting  Baseada em protótipos  Dinâmica  Com tipagem fraca  Funções como primeira classe Linguagem de múltiplos paradigmas  Orientada a objetos  Imperativa  Funcional Não confundir com Java
  5. 5. Influências da JavaScriptInspiração na criação Base dos princípios chaves da arquitetura  Linguagem Self  Linguagem Scheme Base da sintaxe  Linguagem C Nomes e convenções de nomenclatura  Linguagem Java
  6. 6. História da JavaScriptCriação e evolução inicial da linguagem ECMAScript 1a edição do padrão ECMA-262 (Jun 1997) da linguagem ECMAScript Padronização A Netscape submeteu a JavaScript (Nov 1996) para a Ecma International (padrão) JScript Implementação da Microsoft (Aug 1996) Internet Explorer 3.0 JavaScript Renomeada para JavaScript (Dez 1995) Netscape Navigator 2.0B3 (final)LiveScript Por Brendan Eich da Netscape (Set 1995) Netscape Navigator 2.0 Beta
  7. 7. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  8. 8. História da ECMAScriptEvolução da especificação ECMA-232 Harmony Trabalho em andamento Edição 5.1 Alinhamento com o padrão (Jun 2011) ISO/IEC 16262:2011 Edição 5 Strict mode, getters e setters, (Dez 2009) suporte a JSON, ... Edição 4 Abandonada devido à complexidade (Abandonada) Base da 5a edição e do Harmony Edição 3 Expressões regulares, novas instruções (Dez 1999) de controle, try/catch, ... Edição 2 Alinhamento com o padrão (Jun 1998) ISO/IEC 16262 Edição 1 Liberação da 1a edição (Jun 1997)
  9. 9. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  10. 10. Usos da JavaScriptAlguns casos de uso da linguagem Scripts do lado do cliente  Implementada em Web Browsers  Permite acesso programático a objetos no browser jQuery – Biblioteca JavaScript CoffeeScript compila em JavaScript Node.js – Orientado a eventos E/S  JavaScript do lado do servidor Windows 8 Metro Style  HTML5/CSS3/JavaScript
  11. 11. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  12. 12. Objetos e propriedadesNo contexto da linguagem ECMAScript JavaScript é baseada em objetos Objetos  Coleções de propriedades  Do tipo pré-definido: Object Propriedades  São contêineres para outros objetos, valores primitivos ou funções
  13. 13. Valores primitivos e funçõesNo contexto da linguagem ECMAScript Valores primitivos  Um dos seguintes tipos pré-definidos:  Undefined  Null  Boolean  Number  String Função  Objeto que pode ser chamado  Método  Função associada com um objeto via uma propriedade
  14. 14. Objetos pré-definidosNo contexto da linguagem ECMAScript Coleção de objetos pré-definidos  Objeto global  RegExp  Object  JSON  Function  Objetos de erro  Array  Error  String  EvalError  Boolean  RangeError  ReferenceError  Number  SyntaxError  Math  TypeError  Date  URIError
  15. 15. OperadoresNo contexto da linguagem ECMAScript Operadores pré-definidos  Unários  Atribuição ++ –– + – ~ = *= /= %= += ! delete void –= <<= >>= >>>= typeof &= ^= |=  Multiplicativos  Igualdade * / % < > <= >=  Aditivos instanceof in + –  Relacionais  Bitwise == != === !== << >> >>>  Lógicos & ^ | && ||  Condicional  Vírgula ? : ,
  16. 16. Instruções condicionaisNo contexto da linguagem ECMAScript Instrução if  if (expressão) instrução else instrução  if (expressão) instrução Instrução switch  switch (expressão) { [case expressão : Instruçõesopcionais] [case expressão : Instruçõesopcionais] ... [default : Instruçõesopcionais] }
  17. 17. Instruções de iteraçãoNo contexto da linguagem ECMAScript Instrução for  for (expressãoopcional; expressãoopcional; expressãoopcional) instrução  for (var listaDeclaraçãoVariável; expressãoopcional; expressãoopcional) instrução Instrução for...in  for (expressãoLadoEsquerdo in expressão) instrução  for (var declaraçãoVariável in expressão) instrução
  18. 18. Instruções de iteraçãoNo contexto da linguagem ECMAScript Instrução do...while  do instrução while (expressão) Instrução while  while (expressão) instrução Instrução continue  continue;  continue identificador; Instrução break  break;  break identificador;
  19. 19. Tratamento de erroNo contexto da linguagem ECMAScript Instrução try  try { instruções } catch (identificador) { instruçõesopcionais }  try { instruções } finally { instruçõesopcionais }  try { instruções } catch (identificador) { instruçõesopcionais } finally { instruçõesopcionais } Instrução throw  throw expressão;
  20. 20. Outras instruçõesNo contexto da linguagem ECMAScript Instrução with  with (expressão) instrução  Uma instrução with no modo estrito (ES5) é tratado como SyntaxError Instrução return  return;  return expressão; Instrução rotulada  Identificador : instrução Instrução debugger  debugger;
  21. 21. FunçõesNo contexto da linguagem ECMAScript Funções em JavaScript  São construções de primeira classe na linguagem JavaScript  São objetos que podem ser chamados  Podem ter propriedades associadas Sintaxe  Função com identificador  function identificador (ListaParamsopcional) { CorpoDaFunção }  Função anônima  function (ListaParamopcional) { CorpoDaFunção }
  22. 22. Retorno e herança nas funçõesNo contexto da linguagem ECMAScript Algumas características das funções  Podem retornar valores  Sem a instrução return ou com return sem expressão retornam undefined Herança baseada em protótipos  Funções herdam de Function.prototype  Que por sua vez herdam de Object.prototype
  23. 23. Chamada de funçõesNo contexto da linguagem ECMAScript Modos de chamar uma função  Diretamente por meio de parênteses  Indiretamente pelos seguintes métodos herdados de Function.prototype  call(argThis[, arg1[, arg2, ...]])  apply(argThis, argArray) Na chamada não há checagem do número de argumentos  Não há sobrecarga em JavaScript  Parâmetros não fornecidos terão valor undefined
  24. 24. Funções
  25. 25. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  26. 26. ObjetosNo contexto da linguagem ECMAScript JavaScript não usa classes  Diferente de C++, C#, Java e Smalltalk Objetos podem ser criados via:  Notação literal  Construtor Objetos são passados por referência  Eles nunca são copiados
  27. 27. Literais de objetosConceito em JavaScript Objeto vazio var objetoVazio = {}; var contato = { nome: "Maria", "e-mail": "maria@xyz.com.br" Objeto simples }; var voo = { companhia: "TAM", codigo: "JJ3702", partida: { dataHorario: "2011-09-29 09:17", cidade: "Brasília", uf: "DF" Objeto aninhado }, chegada: { dataHorario: "2011-09-29 10:47", cidade: "São Paulo", uf: "SP" } };
  28. 28. PropriedadesNo contexto da linguagem ECMAScript Leitura de propriedades  objeto.propriedade  objeto[“propriedade”] Atualização de propriedades  Via atribuição  Se já existir, então será atualizada  Se não existir, então será adicionada Exclusão de propriedades  delete objeto.propriedade Enumeração  for...in
  29. 29. Objetos e propriedades
  30. 30. Herança baseada em protótipoNo contexto da linguagem ECMAScript Em uma linguagem POO baseada em classes  Estado é transportado por instâncias  Métodos são transportados por classes  Herança é de estrutura e comportamento Em JavaScript  Estado e métodos são transportados por objetos (instâncias)  Herança é de estrutura, comportamento e estado
  31. 31. Herança baseada em protótipoNo contexto da linguagem ECMAScript JavaScript não usa classes  Diferente de C++, C#, Java e Smalltalk Objetos podem ser criados via:  Notação literal  Construtor Cada construtor é uma função  Que contém uma propriedade nomeada prototype  Usada para implementar herança baseada em protótipo e propriedades compartilhadas
  32. 32. Herança baseada em protótipoNo contexto da linguagem ECMAScript Cada objeto é vinculado um objeto protótipo  Do qual ele pode herdar propriedades Método hasOwnProperty(str)  Verifica se um objeto possui uma propriedade particular  O método não verifica na cadeia de protótipos Reflexão  Operador typeof
  33. 33. Objeto globalNo contexto da linguagem ECMAScript O único objeto global é criado antes do controle entrar em qualquer contexto de execução Em browsers  Em HTML, o Document Object Model define o objeto global como sendo o objeto window
  34. 34. Herança baseada emprotótipo
  35. 35. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  36. 36. ECMAScript 5Novidades Melhor controle sobre propriedades  Controle do acesso a propriedades  Getter (controle sobre a leitura)  Setter (controle sobre a escrita)  Controle de atributos de propriedades  Descritores de propriedades Programação mais robusta  Objetos a prova de adulteração  Modo estrito (“strict mode”)
  37. 37. ECMAScript 5Novidades Novas APIs  Novos métodos para Arrays  JSON (JavaScript Object Notation)  Function.prototype.bind
  38. 38. Prevenindo a extensibilidadeNovidades da ECMAScript 5 Object.preventExtensions(obj)  Previne futuros acréscimos de propriedades num objeto Object.isExtensible(obj)  Determina a extensibilidade atual de um objeto
  39. 39. Novo tipo de propriedadeNovidades da ECMAScript 5 Novo tipo de propriedade  Propriedade de acesso nomeada  Associa um nome com duas funções de acesso (get/set) e um conjunto de atributos booleanos Mantidos os tipos da ECMAScript 3  Propriedade de dados nomeada  Associa um nome com um valor e um conjunto de atributos booleanos  Propriedade interna  Não tem nome e não é diretamente acessível pelos operadores da linguagem ECMAScript
  40. 40. Descritores de propriedadeNovidades da ECMAScript 5 Descritores  value  Valor da propriedade  writable (booleana)  Se permite a modificação do valor da propriedade  configurable (booleana)  Se permite a exclusão da propriedade ou a modificação de seus descritores  enumerable (booleana)  Se permite que a propriedade apareça numa enumeração de propriedades
  41. 41. Definição de uma propriedadeNovidades da ECMAScript 5 Object.defineProperty(obj, prop, desc)  Este método permite a definição de uma nova propriedade num objeto  obj  Objeto  prop  Propriedade do objeto a ser criada  desc  Descritores da nova propriedade
  42. 42. get/set em propriedadesNovidades da ECMAScript 5 Object.defineProperty( obj, prop, { get: function(){ … }, set: function(valor) { … } });  Este método permite a definição de uma nova propriedade com get/set  obj  Objeto  prop  Propriedade do objeto a ser criada
  43. 43. Criação de objetosNovidades da ECMAScript 5 Object.create ( objPrototipo [, desc])  Este método permite a definição de uma nova propriedade com get/set  objPrototipo  Objeto protótipo  desc  Descritores da nova propriedade
  44. 44. Modo estritoPermite escrever código JavaScript mais restritivo(function () { "use strict"; // Função em modo estrito var idade; Idade = 5; // Erro! arguments.caller; // Erro! arguments.callee; // Erro! var obj = { x: 5 }; Object.freeze(obj); obj.x = 7; // Lança um erro}());
  45. 45. Novidades da ECMAScript 5
  46. 46. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  47. 47. 5 browsers mais usadosEstatística da StatCounter – Mundo 41.89% 27.49% 23.16% 5.19% 1.67%
  48. 48. 5 browsers mais usadosEstatística da StatCounter – Brasil 43.05% 31.35% 24.26% 0.78% 0.40%
  49. 49. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  50. 50. Suporte à ECMAScript 5Existência de suporte no Internet ExplorerNovidade da ECMAScript 5 IE 8 IE 9 IE 10 PP2Object.create Não Sim SimObject.defineProperty Sim [1] Sim SimObject.defineProperties Não Sim SimObject.getPropertyOf Não Sim SimObject.keys Não Sim SimObject.seal Não Sim SimObject.freeze Não Sim SimObject.preventExtensions Não Sim SimObject.isSealed Não Sim SimObject.isFrozen Não Sim SimObject.isExtensible Não Sim SimObject.getOwnPropertyDescriptor Sim Sim SimObject.getOwnPropertyNames Não Sim SimDate.prototype.toISOString Não Sim SimDate.now Não Sim SimArray.isArray Não Sim SimJSON Sim Sim Sim
  51. 51. Suporte à ECMAScript 5Existência de suporte no Internet ExplorerNovidade da ECMAScript 5 IE 8 IE 9 IE 10 PP2Function.prototype.bind Não Sim SimString.prototype.trim Não Sim SimArray.prototype.indexOf Não Sim SimArray.prototype.lastIndexOf Não Sim SimArray.prototype.every Não Sim SimArray.prototype.some Não Sim SimArray.prototype.forEach Não Sim SimArray.prototype.map Não Sim SimArray.prototype.filter Não Sim SimArray.prototype.reduce Não Sim SimArray.prototype.reduceRight Não Sim SimGetter na inicialização de propriedade Não Sim SimSetter na inicialização de propriedade Não Sim SimAcesso a propriedades em Strings [1] Sim Sim SimPalavras reservadas em nomes de Não Sim Simpropriedades [2]Modo estrito (Strict mode) [3] Não Não Sim [4]
  52. 52. Suporte à ECMAScript 5Existência de suporte no Mozilla FirefoxRecurso da ECMAScript 5 FF 3.5, 3.6 FF 4-6Object.create Não SimObject.defineProperty Não SimObject.defineProperties Não SimObject.getPropertyOf Sim SimObject.keys Não SimObject.seal Não SimObject.freeze Não SimObject.preventExtensions Não SimObject.isSealed Não SimObject.isFrozen Não SimObject.isExtensible Não SimObject.getOwnPropertyDescriptor Não SimObject.getOwnPropertyNames Não SimDate.prototype.toISOString Sim SimDate.now Sim SimArray.isArray Não SimJSON Sim Sim
  53. 53. Suporte à ECMAScript 5Existência de suporte no Mozilla FirefoxRecurso da ECMAScript 5 FF 3.5, 3.6 FF 4-6Function.prototype.bind Não SimString.prototype.trim Sim SimArray.prototype.indexOf Sim SimArray.prototype.lastIndexOf Sim SimArray.prototype.every Sim SimArray.prototype.some Sim SimArray.prototype.forEach Sim SimArray.prototype.map Sim SimArray.prototype.filter Sim SimArray.prototype.reduce Sim SimArray.prototype.reduceRight Sim SimGetter na inicialização de propriedade Sim SimSetter na inicialização de propriedade Sim SimAcesso a propriedades em Strings [1] Sim SimPalavras reservadas em nomes de Sim Simpropriedades [2]Modo estrito (Strict mode) [3] Não Sim
  54. 54. Suporte à ECMAScript 5Existência de suporte no Google ChromeRecurso da ECMAScript 5 CH 7-12 CH 13, 14Object.create Sim SimObject.defineProperty Sim SimObject.defineProperties Sim SimObject.getPropertyOf Sim SimObject.keys Sim SimObject.seal Sim SimObject.freeze Sim SimObject.preventExtensions Sim SimObject.isSealed Sim SimObject.isFrozen Sim SimObject.isExtensible Sim SimObject.getOwnPropertyDescriptor Sim SimObject.getOwnPropertyNames Sim SimDate.prototype.toISOString Sim SimDate.now Sim SimArray.isArray Sim SimJSON Sim Sim
  55. 55. Suporte à ECMAScript 5Existência de suporte no Google ChromeRecurso da ECMAScript 5 CH 7-12 CH 13, 14Function.prototype.bind Sim SimString.prototype.trim Sim SimArray.prototype.indexOf Sim SimArray.prototype.lastIndexOf Sim SimArray.prototype.every Sim SimArray.prototype.some Sim SimArray.prototype.forEach Sim SimArray.prototype.map Sim SimArray.prototype.filter Sim SimArray.prototype.reduce Sim SimArray.prototype.reduceRight Sim SimGetter na inicialização de propriedade Sim SimSetter na inicialização de propriedade Sim SimAcesso a propriedades em Strings [1] Sim SimPalavras reservadas em nomes de Sim Simpropriedades [2]Modo estrito (Strict mode) [3] Não Sim
  56. 56. Suporte à ECMAScript 5Existência de suporte no Apple SafariNovidade da ECMAScript 5 SF 4 SF 5 SF 5.1Object.create Não Sim SimObject.defineProperty Não Sim SimObject.defineProperties Não Sim SimObject.getPropertyOf Não Sim SimObject.keys Não Sim SimObject.seal Não Não SimObject.freeze Não Não SimObject.preventExtensions Não Não SimObject.isSealed Não Não SimObject.isFrozen Não Não SimObject.isExtensible Não Não SimObject.getOwnPropertyDescriptor Não Sim SimObject.getOwnPropertyNames Não Sim SimDate.prototype.toISOString Sim Sim SimDate.now Sim Sim SimArray.isArray Não Sim SimJSON Sim Sim Sim
  57. 57. Suporte à ECMAScript 5Existência de suporte no Apple SafariNovidade da ECMAScript 5 SF 4 SF 5 SF 5.1Function.prototype.bind Não Não NãoString.prototype.trim Não Sim SimArray.prototype.indexOf Sim Sim SimArray.prototype.lastIndexOf Sim Sim SimArray.prototype.every Sim Sim SimArray.prototype.some Sim Sim SimArray.prototype.forEach Sim Sim SimArray.prototype.map Sim Sim SimArray.prototype.filter Sim Sim SimArray.prototype.reduce Sim Sim SimArray.prototype.reduceRight Sim Sim SimGetter na inicialização de propriedade Sim Sim SimSetter na inicialização de propriedade Sim Sim SimAcesso a propriedades em Strings [1] Sim Sim SimPalavras reservadas em nomes de Não Sim Simpropriedades [2]Modo estrito (Strict mode) [3] Não Sim Sim
  58. 58. Suporte à ECMAScript 5Existência de suporte no WebKitRecurso da ECMAScript 5 WebKitFunction.prototype.bind NãoString.prototype.trim SimArray.prototype.indexOf SimArray.prototype.lastIndexOf SimArray.prototype.every SimArray.prototype.some SimArray.prototype.forEach SimArray.prototype.map SimArray.prototype.filter SimArray.prototype.reduce SimArray.prototype.reduceRight SimGetter na inicialização de propriedade SimSetter na inicialização de propriedade SimAcesso a propriedades em Strings [1] SimPalavras reservadas em nomes de Simpropriedades [2]Modo estrito (Strict mode) [3] Sim
  59. 59. Suporte à ECMAScript 5Existência de suporte no WebKitRecurso da ECMAScript 5 WebKitObject.create SimObject.defineProperty SimObject.defineProperties SimObject.getPropertyOf SimObject.keys SimObject.seal SimObject.freeze SimObject.preventExtensions SimObject.isSealed SimObject.isFrozen SimObject.isExtensible SimObject.getOwnPropertyDescriptor SimObject.getOwnPropertyNames SimDate.prototype.toISOString SimDate.now SimArray.isArray SimJSON Sim
  60. 60. Suporte à ECMAScript 5Existência de suporte no OperaRecurso da ECMAScript 5 OP 10.50 – 11.50 OP 12 BetaObject.create Não SimObject.defineProperty Não SimObject.defineProperties Não SimObject.getPropertyOf Não SimObject.keys Não SimObject.seal Não SimObject.freeze Não SimObject.preventExtensions Não SimObject.isSealed Não SimObject.isFrozen Não SimObject.isExtensible Não SimObject.getOwnPropertyDescriptor Não SimObject.getOwnPropertyNames Não SimDate.prototype.toISOString Sim SimDate.now Sim SimArray.isArray Sim SimJSON Sim Sim
  61. 61. Suporte à ECMAScript 5Existência de suporte no OperaRecurso da ECMAScript 5 OP 10.50-11.50 OP 12Function.prototype.bind Não SimString.prototype.trim Sim SimArray.prototype.indexOf Sim SimArray.prototype.lastIndexOf Sim SimArray.prototype.every Sim SimArray.prototype.some Sim SimArray.prototype.forEach Sim SimArray.prototype.map Sim SimArray.prototype.filter Sim SimArray.prototype.reduce Sim SimArray.prototype.reduceRight Sim SimGetter na inicialização de propriedade Sim SimSetter na inicialização de propriedade Sim SimAcesso a propriedades em Strings [1] Sim SimPalavras reservadas em nomes de Não Simpropriedades [2]Modo estrito (Strict mode) [3] Não Sim
  62. 62. AgendaPresente e futuro da linguagem JavaScript A linguagem JavaScript A linguagem ECMAScript Usos mais comuns da JavaScript Conceitos iniciais da JavaScript Orientação a objetos em JavaScript Novidades da ECMAScript 5 Browsers mais usados Suporte à ECMAScript 5 Considerações finais
  63. 63. Considerações finaisDicas JavaScript é uma linguagem de programação simples, poderosa e flexível Pesquise códigos de bibliotecas  Analise os códigos de implementação das suas bibliotecas JavaScript favoritas Teste seus códigos JavaScript nos principais browsers  Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, Opera, ... Aprenda sobre as novidades da ECMAScript 5  Considere optar pelo modo estrito

×