Javascript Avançado

2,012 views

Published on

Técnicas avançadas em JavaScript. Referências, Objetos, Funções e Orientação à Objetos.

Published in: Technology
  • Be the first to comment

Javascript Avançado

  1. 1. JavascriptAvançado<br />Bruno Tavares<br />
  2. 2. Referências<br />
  3. 3. Uma “variável” é um ponteiropara um espaço de memóriaaondealgum valor éarmazenado.<br />
  4. 4. Referênciaspodemser re-alocadas<br />varref= {};<br />console.log(typeof ref); //object<br />ref = [1 , 4, 2];<br />console.log(typeof ref); //object<br />ref=false;<br />console.log(typeof ref); //boolean<br />
  5. 5. varref= {};<br />{}<br />var ref2 =ref;<br />
  6. 6. varref= {};<br />{}<br />var ref2 =ref;<br />[1,2,3]<br />ref=[1,2,3];<br />
  7. 7. Referênciasglobais<br />alert('Teste');<br />window.alert('Teste');<br />refGlobal='abc';<br />console.log(window.refGlobal); //abc<br />console.log(window['refGlobal']); //abc<br />
  8. 8. Exercícios<br />//1<br />var a =3;<br />var b = a;<br />console.log(a);<br />console.log(b);<br />a =9;<br />console.log(a);<br />console.log(b);<br />
  9. 9. Exercícios<br />//2<br />functionsetName(obj, name){<br />obj.name= name;<br />}<br />var data = {<br /> name : 'Fulano'<br />};<br />var copy = data;<br />setName(copy, 'Ciclano');<br />console.log(copy.name);<br />console.log(data.name);<br />
  10. 10. Exerícios<br />//3<br />functionsetVariables(){<br />var a =1;<br /> b =3; <br /> c =4; <br />}<br />console.log(window.a);<br />console.log(window.b);<br />console.log(window.c);<br />setVariables();<br />console.log(window.a);<br />console.log(window.b);<br />console.log(window.c);<br />
  11. 11. Objetos<br />
  12. 12. Podemser vistas como Hash Tables, ouconjuntoschave-valor.<br />varconfig= {};<br />config.expansivel =true;<br />config.altura=200;<br />
  13. 13. Chamamososvalores de propriedades de um objeto. Quandotrata-se de umafunção, chamamos de métodos.<br />
  14. 14. varconfig= {<br />expansivel: true,<br />altura: 200,<br />ehExpansivel: function(){<br />returnthis.expansivel;<br /> },<br />getAltura: function()<br /> {<br />returnthis.altura;<br /> }<br />};<br />config.ehExpansivel(); //true<br />
  15. 15. Funciona com Tudo<br />var hoje =newDate();<br />hoje.bar='teste';<br />hoje.foo=function()<br />{<br />alert(this.bar);<br />}<br />hoje.foo(); //teste<br />
  16. 16. JSON<br />Objeto JavaScript emlinguagem literal<br />{<br />total: 2,<br /> dados: [<br /> { nome: "Fulano", idade: 22 },<br /> { nome: "Ciclano", idade: 34 },<br /> ]<br />}<br />
  17. 17. PropriedadesExpando<br />varconfig= {<br /> expanded: false<br />};<br />config.expanded; //false<br />config['expanded']; //false<br />
  18. 18. //ReferenceError: Ext is not defined<br />if(Ext){<br />alert('Ext JS framework included!');<br />}<br />// bom :)<br />if(window['Ext']){<br />alert('Ext JS framework included!');<br />}<br />
  19. 19. var combo =document.getElementById('my_combo'), <br /> config = { valueField: 'id' },<br /> data = { id: 1 };<br />//má tentativa de acessar data.id. Péssima!<br />combo.value=eval('data. '+config.valueField);<br />// bom :)<br />combo.value=data[config.valueField];<br />
  20. 20. Exercício<br />//1 ...<br />alert(data.total); //10<br />alert(data.rows[0].id); //3<br />//2 ...<br />alert(fulano.nome); //Fulano<br />alert(fulano.getNome()); //Fulano<br />//3<br />var teste1 = {nome: 'Fulano’}<br /> teste2 = {descricao: 'LoremIpsum'};<br />//...<br />alerta(teste1, 'nome'); //Fulano<br />alerta(teste2, 'descricao'); //LoremIpsum<br />
  21. 21. Funções<br />
  22. 22. FunçõescomoObjetos<br />functiongerarID(){<br />gerarID.semente++;<br />return gerarID.semente; <br />}<br />gerarID.semente=0;<br />gerarID(); //1<br />gerarID(); //2<br />
  23. 23. NotaçõesparaFunção<br />functionfoo(){}<br />==<br />varfoo=function(){};<br />
  24. 24. FunçõesAnônimas<br />varconector=function(conexao)<br />{<br />returnfunction()<br /> {<br />alert(conexao);<br /> };<br />}<br />varconectorMySQL=conector('connectmysql');<br />varconectorSQLite=conector('connectsqlite');<br />conectorMySQL(); //connectmysql<br />conectorSQLite();//connectsqlite<br />
  25. 25. FunçõesAnônimas<br />varexecutaRepeticao=function(repeticao, funcao)<br />{<br />for(var i =0 ; i < repeticao ; i++){<br />funcao.call();<br /> }<br />}<br />executaRepeticao(2, function(){<br />alert('teste');<br />});<br />//'teste'! 'teste'!<br />
  26. 26. Argumentos<br />functionsoma()<br />{<br />var i =0,<br /> len =arguments.length,<br /> resultado =0;<br />for(; i < len ; i++){<br /> resultado +=arguments[i];<br /> }<br />return resultado;<br />}<br />soma(2); //2<br />soma(2, 8); //10<br />soma(1, 2, 4); //7<br />
  27. 27. Invocando<br />varconfig= { mensagem: 'Olá de ' };<br />vardizNome=function(nome){<br />alert(this.mensagem+ nome);<br />}<br />dizNome('Fulano'); //undefinedFulano<br />dizNome.call(config, 'Fulano'); //Olá de Fulano<br />dizNome.apply(config, ['Fulano']); //Olá de Fulano<br />
  28. 28. .call vs .apply<br />varfoo=function(a, b, c)<br />{<br />return a + b + c;<br />}<br />//4 parâmetros, scope + n diversos<br />foo.call(this, 1, 2, 3); <br />//2 parametros, scope + array de diversos<br />foo.apply(this, [1, 2, 3]); <br />
  29. 29. Exercícios<br />//1 …<br />varformataReal=formatadorMonetario('R$'),<br />formataDolar=formatadorMonetario('$');<br />alert(formataReal(2.3)); //R$2.3<br />alert(formataDolar(2.3)); //$2.3<br />//2 …<br />var concatenaHifen = concatenador(' - '),<br /> concatenaPonto = concatenador('.');<br />//Javascript-Ninja<br />alert(concatenaHifen('JavaScript', 'Ninja')); <br />//Ext.panel.Panel<br />alert(concatenaPonto('Ext', 'panel', 'Panel')); <br />
  30. 30. Exercícios<br />var data1 = { name : 'AAAAA' },<br /> data2 = { name: 'BBBBB' };<br />functionsetName(data, name){<br />this.name= name;<br />}<br />data1.setName = data2.setName =setName;<br />data1.setName(data2, 'FFFFFF');<br />console.log(data1.name);<br />console.log(data2.name);<br />setName.call(data2, data1, 'GGGGG');<br />console.log(data1.name);<br />console.log(data2.name);<br />data2.setName.apply(data1, [data2, 'LLLLL']);<br />console.log(data1.name);<br />console.log(data2.name);<br />
  31. 31. FunçõescomoConstrutores<br />functionpessoa(){<br />}<br />pessoa();<br />Aparentementeumafunçãocomum. Um simples exemplo de programaçãointerpretada.<br />
  32. 32. FunçõescomoConstrutores<br />functionPessoa(){<br />}<br />var fulano =newPessoa();<br />Podeserconsiderado um construtor, apenasadicionandonew<br />
  33. 33. Atributos<br />functionPessoa(nome){<br />this.nome=nome;<br />}<br />var fulano =newPessoa("Fulano");<br />alert(fulano.nome); //Fulano<br />
  34. 34. Prototype<br />functionPessoa(nome){<br />this.nome=nome;<br />}<br />Pessoa.prototype= {<br />dizerOla: function(){<br />alert('Olá de '+this.nome);<br /> }<br />};<br />var fulano =newPessoa("Fulano");<br />fulano.dizerOla();<br />Prototype podeserconsiderado o corpo da classe. Aondesãoassociadosmétodos e atributos.<br />
  35. 35. Prototype<br />functionPessoa(nome){<br />this.nome=nome;<br />}<br />var fulano =newPessoa("Fulano");<br />alert(fulano.dizerOla); //undefined<br />Pessoa.prototype.dizerOla=function(){<br />alert('Olá de '+this.nome);<br />};<br />alert(fulano.dizerOla); //function<br />fulano.dizerOla(); //Olá de Fulano<br />Alterar o protótipo de umaclassetêmefeitotambémeminstânciaspreviamentecriadas.<br />
  36. 36. Herança<br />//retorna um objeto com todos métodos de pessoa<br />newPessoa(); <br />//cria nova classe pirada<br />varPirata=function(){};<br />//herda os métodos de pessoa<br />Pirata.prototype=newPessoa();<br />//teste<br />var jack =newPirata("Jack");<br />jack.dizerOla(); //Olá de Jack<br />
  37. 37. Exercício<br />varatleta=newAtleta('Fulano');<br />alert(atleta.getNome()); //Fulano<br />atleta.setNome('Fulano da Silva');<br />alert(atleta.getNome()); //Fulano da Silva<br />varjogador=newJogadorFutebol('Ciclano');<br />alert(jogador.getNome()); //Ciclano<br />jogador.marcarGols();<br />alert(jogador.getGols()); //1<br />jogador.marcarGols(2);<br />alert(jogador.getGols()); //3<br />

×