JavaScript "for dummies"

392
-1

Published on

Do básico ao avançado sobre uma das mais incompreendidas linguagens de programação, o JavaScript.
Palestra realizada no encontrodo do grupo DevRioClaro em 21/6/14

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
392
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript "for dummies"

  1. 1. JavaScript for dummies
  2. 2. Seja bem vindo(a)! Somos um grupo voluntário e independente de desenvolvedores de software, com o intuito de disseminar conhecimento e fortalecer a comunidade local fb.com/groups/DevRioClaro devrioclaro@gmail.com
  3. 3. www.mappase.com.br
  4. 4. www.novatec.com.br • Livro para sorteio no dia do evento! • 30% de desconto - “DevRioClaro30” (válido até 15/07/2014)
  5. 5. www.casadocodigo.com.br • 2 e-Books para sorteio no dia do evento! • 15% desconto - “DevRioClaro” (valido até 23/06/2014)
  6. 6. www.lcm.com.br • Desconto de 40% livro impresso e 10% eBook - “V00031” (válido até ...)
  7. 7. Murilo Beltrame • Marketing - FACINTER • Especialista Microsoft (MCTSWeb Development/Data Access) • Entusiasta JavaScript • Motociclista • Futuro marido
  8. 8. Agenda • Intro • Conceitos • Tipos • Sintaxe • Closure & ‘Scope chain’ • Objetos
  9. 9. Intro
  10. 10. Intro – ‘95
  11. 11. Intro – ‘96
  12. 12. Intro Conteúdo Estilização Comportamento
  13. 13. Conceitos
  14. 14. Conceitos • Sensível à caixa (a != A) • Interpretado, não compilado • Tipagem dinâmica • Objetos são apenas hastables • Herança por prototipagem • Funções são objetos • Vetores são objetos
  15. 15. Conceitos – think about O JavaScript foi criado para manipular o DOM (Documento Object Mobel) & BOM (Browser Object Model), mas esses não são parte do JavaScript.
  16. 16. Conceitos - interpretado Um erro interrompe a execução de todo código seguinte no escopo
  17. 17. Languages (compile, then interpret)
  18. 18. Frameworks (write different, do same thing)
  19. 19. Conceitos – tipagem dinâmica var a; //undefined a = 1; //number a = ‘a’; //string a = true; //boolean a = null; //null
  20. 20. DEMO Tipagem dinâmica
  21. 21. Tipos
  22. 22. Tipos • Números • Strings • Booleans • null • Undefined Todo o resto são objetos
  23. 23. Tipos – number • Ponto flutuante de 64 bits • Os mesmos problemas aritmeticos que envolvem double • NaN (Not a number) é um valor especial que representa erros
  24. 24. Tipos - Strings • Unicode 16 bits • Não existem ‘chars’. • “A” = ‘a’
  25. 25. Tipos - Boolean • Verdadeiro ou Falso • Boolean(exp) é uma função que retorna a veracidade da expressão • !!value é a mesma coisa que value
  26. 26. Tipos - Boolean • Falso • false • null, • undefined, • “”, • 0, • NaN Todo o resto é verdadeiro
  27. 27. DEMO Truthy || Falsy
  28. 28. Tipos - Null • Nada • Normalmente usado para erros • null sempre é atribuido a uma variavel de forma deliberada
  29. 29. Tipos - Undefined • Nada mesmo • Qualquer variavel que nunca recebeu valor é undefined
  30. 30. Tipos – Objetos • Todo o resto são objetos • Objetos são hashtables (coleção de chave/valor) • Objetos não tem classes • Objetos são dinamicos (é possivel alterar sua estrutura em tempo de execução)
  31. 31. Sintaxe
  32. 32. Sintaxe - Indetificadores • Começam com a-z,A-Z,_ ou $ • Seguem com a-z,A-Z,0-9,_ ou $
  33. 33. Sintaxe – Palavras reservadas 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
  34. 34. Sintaxe - Comentários // linha comentada /* Bloco comentado */
  35. 35. Sintaxe – Laços de repetição while (exp) { ... } do { ... } while (exp); for (pointer; test; increment) { ... } for (ele in collection) { ... }
  36. 36. Sintaxe – Controle de fluxo if (exp) {...} else if (exp){...} else {...} switch (exp){ case opt: ...; break; default: ...;break; }
  37. 37. Sintaxe - Funções function Name(arg1,arg2,...){...} var Name = function(arg1,arg2,...){...}
  38. 38. Sintaxe - Funções • Sempre é boa idéia testar a validade de cada argumento (e normaliza-los caso necessário) na entrada da função • Uma função pode receber outra função como parametro • É possível informar uma cadeia de parametros. Esse parametros são armazenados numa variavel especial arguments • Todos os parâmetros são opcionais. Se o parâmetro não tem valor especificado na chamado do método, o argumento é undefined
  39. 39. DEMO Arguments, Optional parameter, Function as parameter
  40. 40. Closure & ‘Scope chain’
  41. 41. Closure & ‘Scope chain’ Global Object Attr Closure vars Function vars
  42. 42. Closure & ‘Scope chain’ //global scope function closureFunction(){ // closure scope ... function generalFunction(){ //function scope } }
  43. 43. DEMO Closure & Scope Chain
  44. 44. Objetos
  45. 45. Objetos - JSON var obj = { marca:’Volks’, modelo:’Fusca’, pegaModelo:function(){ return marca+ ‘ ‘ + modelo; } }
  46. 46. Objetos - Array var array = new Array(); var array = []; array[7] = ‘Fusca’; array[7] //’Fusca’ array[77] = function(a,b){ return a+b; }; array[77](1,2); //4
  47. 47. Objetos - Array var array = []; array[‘modelo’] = ‘Fusca’; array[‘modelo’]; //Fusca array.modelo; //Fusca array[‘transformarEmTanqueDeGuerra’] = function(){}; array.transformarEmTanqueDeGuerra();
  48. 48. DEMO Object Array
  49. 49. Objetos – Funções var carro = function(modelo,marca) { this.Modelo = modelo; this.Marca = marca; } var fusca = new carro(‘fusca’,’volks’);
  50. 50. Objetos – Funções var carro = function(modelo,marca){ var _marca = marca; var _modelo = modelo; this.pegaMarca = function(){return _marca;} this.pegaModelo = function(){return _modelo;} } var fusca = new carro(‘fusca’,’volks’); fusca.pegaMarca(); //volks fusca[‘pegaModelo’]();//fusca
  51. 51. DEMO Object Function
  52. 52. Objetos – Extensão por protótipo Array.prototype.find = function(arg){ var r = null; for(var i = 0; i < this.length; i++){ if(arg(this[i])) r = this[i]; break; } return r; }
  53. 53. DEMO Extending object with prototype
  54. 54. Objetos – Herança por protótipo var collection = function(){ for(var i in this){...} } collection.prototype = new Array;
  55. 55. DEMO Inheritance with prototype
  56. 56. Next Steps? • DOM Scripting • DocumentTraversing Framework
  57. 57. Thanks murilobeltrame.com.br @murilobeltrame fb.com/murilobeltrame br.linkedin.com/in/murilobeltrame
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×