JavaScript
for dummies
Seja bem vindo(a)!
Somos um grupo voluntário e independente de
desenvolvedores de software, com o intuito de
disseminar co...
www.mappase.com.br
www.novatec.com.br
• Livro para sorteio no dia do evento!
• 30% de desconto - “DevRioClaro30” (válido até 15/07/2014)
www.casadocodigo.com.br
• 2 e-Books para sorteio no dia do evento!
• 15% desconto - “DevRioClaro” (valido até 23/06/2014)
www.lcm.com.br
• Desconto de 40% livro impresso e 10% eBook - “V00031” (válido até ...)
Murilo Beltrame
• Marketing - FACINTER
• Especialista Microsoft (MCTSWeb Development/Data Access)
• Entusiasta JavaScript
...
Agenda
• Intro
• Conceitos
• Tipos
• Sintaxe
• Closure & ‘Scope chain’
• Objetos
Intro
Intro – ‘95
Intro – ‘96
Intro
Conteúdo Estilização Comportamento
Conceitos
Conceitos
• Sensível à caixa (a != A)
• Interpretado, não compilado
• Tipagem dinâmica
• Objetos são apenas hastables
• He...
Conceitos – think about
O JavaScript foi criado para manipular o DOM (Documento Object Mobel) &
BOM (Browser Object Model)...
Conceitos - interpretado
Um erro interrompe a execução de todo código seguinte no escopo
Languages (compile, then interpret)
Frameworks (write different, do same thing)
Conceitos – tipagem dinâmica
var a; //undefined
a = 1; //number
a = ‘a’; //string
a = true; //boolean
a = null; //null
DEMO
Tipagem dinâmica
Tipos
Tipos
• Números
• Strings
• Booleans
• null
• Undefined
Todo o resto são objetos
Tipos – number
• Ponto flutuante de 64 bits
• Os mesmos problemas aritmeticos que envolvem double
• NaN (Not a number) é u...
Tipos - Strings
• Unicode 16 bits
• Não existem ‘chars’.
• “A” = ‘a’
Tipos - Boolean
• Verdadeiro ou Falso
• Boolean(exp) é uma função que retorna a veracidade da expressão
• !!value é a mesm...
Tipos - Boolean
• Falso
• false
• null,
• undefined,
• “”,
• 0,
• NaN
Todo o resto é verdadeiro
DEMO
Truthy || Falsy
Tipos - Null
• Nada
• Normalmente usado para erros
• null sempre é atribuido a uma variavel de forma deliberada
Tipos - Undefined
• Nada mesmo
• Qualquer variavel que nunca recebeu valor é undefined
Tipos – Objetos
• Todo o resto são objetos
• Objetos são hashtables (coleção de chave/valor)
• Objetos não tem classes
• O...
Sintaxe
Sintaxe - Indetificadores
• Começam com a-z,A-Z,_ ou $
• Seguem com a-z,A-Z,0-9,_ ou $
Sintaxe – Palavras reservadas
abstract boolean break byte case catch char class const continue debugger
default delete do ...
Sintaxe - Comentários
// linha comentada
/*
Bloco comentado
*/
Sintaxe – Laços de repetição
while (exp) { ... }
do { ... } while (exp);
for (pointer; test; increment) { ... }
for (ele i...
Sintaxe – Controle de fluxo
if (exp) {...} else if (exp){...} else {...}
switch (exp){ case opt: ...; break; default: ...;...
Sintaxe - Funções
function Name(arg1,arg2,...){...}
var Name = function(arg1,arg2,...){...}
Sintaxe - Funções
• Sempre é boa idéia testar a validade de cada argumento
(e normaliza-los caso necessário) na entrada da...
DEMO
Arguments, Optional parameter, Function as parameter
Closure & ‘Scope chain’
Closure & ‘Scope chain’
Global Object
Attr
Closure vars
Function vars
Closure & ‘Scope chain’
//global scope
function closureFunction(){
// closure scope
...
function generalFunction(){
//func...
DEMO
Closure & Scope Chain
Objetos
Objetos - JSON
var obj = {
marca:’Volks’,
modelo:’Fusca’,
pegaModelo:function(){ return marca+ ‘ ‘ + modelo; }
}
Objetos - Array
var array = new Array();
var array = [];
array[7] = ‘Fusca’;
array[7] //’Fusca’
array[77] = function(a,b){...
Objetos - Array
var array = [];
array[‘modelo’] = ‘Fusca’;
array[‘modelo’]; //Fusca
array.modelo; //Fusca
array[‘transform...
DEMO
Object Array
Objetos – Funções
var carro = function(modelo,marca) {
this.Modelo = modelo;
this.Marca = marca;
}
var fusca = new carro(‘...
Objetos – Funções
var carro = function(modelo,marca){
var _marca = marca;
var _modelo = modelo;
this.pegaMarca = function(...
DEMO
Object Function
Objetos – Extensão por protótipo
Array.prototype.find = function(arg){
var r = null;
for(var i = 0; i < this.length; i++){...
DEMO
Extending object with prototype
Objetos – Herança por protótipo
var collection = function(){
for(var i in this){...}
}
collection.prototype = new Array;
DEMO
Inheritance with prototype
Next Steps?
• DOM Scripting
• DocumentTraversing Framework
Thanks
murilobeltrame.com.br
@murilobeltrame
fb.com/murilobeltrame
br.linkedin.com/in/murilobeltrame
JavaScript "for dummies"
Próximos SlideShares
Carregando em…5
×

JavaScript "for dummies"

599 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
599
No SlideShare
0
A partir de incorporações
0
Número de incorporações
10
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×