JavaScript "for dummies"

Embed Size (px)

DESCRIPTION

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

Text of JavaScript "for dummies"

  • 1. JavaScript for dummies

2. Seja bem vindo(a)! Somos um grupo voluntrio 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. www.mappase.com.br 4. www.novatec.com.br Livro para sorteio no dia do evento! 30% de desconto - DevRioClaro30 (vlido at 15/07/2014) 5. www.casadocodigo.com.br 2 e-Books para sorteio no dia do evento! 15% desconto - DevRioClaro (valido at 23/06/2014) 6. www.lcm.com.br Desconto de 40% livro impresso e 10% eBook - V00031 (vlido at ...) 7. Murilo Beltrame Marketing - FACINTER Especialista Microsoft (MCTSWeb Development/Data Access) Entusiasta JavaScript Motociclista Futuro marido 8. Agenda Intro Conceitos Tipos Sintaxe Closure & Scope chain Objetos 9. Intro 10. Intro 95 11. Intro 96 12. Intro Contedo Estilizao Comportamento 13. Conceitos 14. Conceitos Sensvel caixa (a != A) Interpretado, no compilado Tipagem dinmica Objetos so apenas hastables Herana por prototipagem Funes so objetos Vetores so objetos 15. Conceitos think about O JavaScript foi criado para manipular o DOM (Documento Object Mobel) & BOM (Browser Object Model), mas esses no so parte do JavaScript. 16. Conceitos - interpretado Um erro interrompe a execuo de todo cdigo seguinte no escopo 17. Languages (compile, then interpret) 18. Frameworks (write different, do same thing) 19. Conceitos tipagem dinmica var a; //undefined a = 1; //number a = a; //string a = true; //boolean a = null; //null 20. DEMO Tipagem dinmica 21. Tipos 22. Tipos Nmeros Strings Booleans null Undefined Todo o resto so objetos 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. Tipos - Strings Unicode 16 bits No existem chars. A = a 25. Tipos - Boolean Verdadeiro ou Falso Boolean(exp) uma funo que retorna a veracidade da expresso !!value a mesma coisa que value 26. Tipos - Boolean Falso false null, undefined, , 0, NaN Todo o resto verdadeiro 27. DEMO Truthy || Falsy 28. Tipos - Null Nada Normalmente usado para erros null sempre atribuido a uma variavel de forma deliberada 29. Tipos - Undefined Nada mesmo Qualquer variavel que nunca recebeu valor undefined 30. Tipos Objetos Todo o resto so objetos Objetos so hashtables (coleo de chave/valor) Objetos no tem classes Objetos so dinamicos ( possivel alterar sua estrutura em tempo de execuo) 31. Sintaxe 32. Sintaxe - Indetificadores Comeam com a-z,A-Z,_ ou $ Seguem com a-z,A-Z,0-9,_ ou $ 33. Sintaxe Palavras reservadas abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false nal nally oat 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. Sintaxe - Comentrios // linha comentada /* Bloco comentado */ 35. Sintaxe Laos de repetio while (exp) { ... } do { ... } while (exp); for (pointer; test; increment) { ... } for (ele in collection) { ... } 36. Sintaxe Controle de fluxo if (exp) {...} else if (exp){...} else {...} switch (exp){ case opt: ...; break; default: ...;break; } 37. Sintaxe - Funes function Name(arg1,arg2,...){...} var Name = function(arg1,arg2,...){...} 38. Sintaxe - Funes Sempre boa idia testar a validade de cada argumento (e normaliza-los caso necessrio) na entrada da funo Uma funo pode receber outra funo como parametro possvel informar uma cadeia de parametros. Esse parametros so armazenados numa variavel especial arguments Todos os parmetros so opcionais. Se o parmetro no tem valor especificado na chamado do mtodo, o argumento undefined 39. DEMO Arguments, Optional parameter, Function as parameter 40. Closure & Scope chain 41. Closure & Scope chain Global Object Attr Closure vars Function vars 42. Closure & Scope chain //global scope function closureFunction(){ // closure scope ... function generalFunction(){ //function scope } } 43. DEMO Closure & Scope Chain 44. Objetos 45. Objetos - JSON var obj = { marca:Volks, modelo:Fusca, pegaModelo:function(){ return marca+ + modelo; } } 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. Objetos - Array var array = []; array[modelo] = Fusca; array[modelo]; //Fusca array.modelo; //Fusca array[transformarEmTanqueDeGuerra] = function(){}; array.transformarEmTanqueDeGuerra(); 48. DEMO Object Array 49. Objetos Funes var carro = function(modelo,marca) { this.Modelo = modelo; this.Marca = marca; } var fusca = new carro(fusca,volks); 50. Objetos Funes 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. DEMO Object Function 52. Objetos Extenso por prottipo 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. DEMO Extending object with prototype 54. Objetos Herana por prottipo var collection = function(){ for(var i in this){...} } collection.prototype = new Array; 55. DEMO Inheritance with prototype 56. Next Steps? DOM Scripting DocumentTraversing Framework 57. Thanks murilobeltrame.com.br @murilobeltrame fb.com/murilobeltrame br.linkedin.com/in/murilobeltrame