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

1. JavascriptAvançado Bruno Tavares

2. Referências

3. Uma “variável” é um ponteiropara um espaço de memóriaaondealgum valor éarmazenado.

4. Referênciaspodemser re-alocadas varref= {}; console.log(typeof ref); //object ref = [1 , 4, 2]; console.log(typeof ref); //object ref=false; console.log(typeof ref); //boolean

5. varref= {}; {} var ref2 =ref;

6. varref= {}; {} var ref2 =ref; [1,2,3] ref=[1,2,3];

7. Referênciasglobais alert('Teste'); window.alert('Teste'); refGlobal='abc'; console.log(window.refGlobal); //abc console.log(window['refGlobal']); //abc

8. Exercícios //1 var a =3; var b = a; console.log(a); console.log(b); a =9; console.log(a); console.log(b);

9. Exercícios //2 functionsetName(obj, name){ obj.name= name; } var data = { name : 'Fulano' }; var copy = data; setName(copy, 'Ciclano'); console.log(copy.name); console.log(data.name);

10. Exerícios //3 functionsetVariables(){ var a =1; b =3; c =4; } console.log(window.a); console.log(window.b); console.log(window.c); setVariables(); console.log(window.a); console.log(window.b); console.log(window.c);

11. Objetos

12. Podemser vistas como Hash Tables, ouconjuntoschave-valor. varconfig= {}; config.expansivel =true; config.altura=200;

13. Chamamososvalores de propriedades de um objeto. Quandotrata-se de umafunção, chamamos de métodos.

14. varconfig= { expansivel: true, altura: 200, ehExpansivel: function(){ returnthis.expansivel; }, getAltura: function() { returnthis.altura; } }; config.ehExpansivel(); //true

15. Funciona com Tudo var hoje =newDate(); hoje.bar='teste'; hoje.foo=function() { alert(this.bar); } hoje.foo(); //teste

16. JSON Objeto JavaScript emlinguagem literal { total: 2, dados: [ { nome: "Fulano", idade: 22 }, { nome: "Ciclano", idade: 34 }, ] }

17. PropriedadesExpando varconfig= { expanded: false }; config.expanded; //false config['expanded']; //false

18. //ReferenceError: Ext is not defined if(Ext){ alert('Ext JS framework included!'); } // bom :) if(window['Ext']){ alert('Ext JS framework included!'); }

19. var combo =document.getElementById('my_combo'), config = { valueField: 'id' }, data = { id: 1 }; //má tentativa de acessar data.id. Péssima! combo.value=eval('data. '+config.valueField); // bom :) combo.value=data[config.valueField];

20. Exercício //1 ... alert(data.total); //10 alert(data.rows[0].id); //3 //2 ... alert(fulano.nome); //Fulano alert(fulano.getNome()); //Fulano //3 var teste1 = {nome: 'Fulano’} teste2 = {descricao: 'LoremIpsum'}; //... alerta(teste1, 'nome'); //Fulano alerta(teste2, 'descricao'); //LoremIpsum

21. Funções

22. FunçõescomoObjetos functiongerarID(){ gerarID.semente++; return gerarID.semente; } gerarID.semente=0; gerarID(); //1 gerarID(); //2

23. NotaçõesparaFunção functionfoo(){} == varfoo=function(){};

24. FunçõesAnônimas varconector=function(conexao) { returnfunction() { alert(conexao); }; } varconectorMySQL=conector('connectmysql'); varconectorSQLite=conector('connectsqlite'); conectorMySQL(); //connectmysql conectorSQLite();//connectsqlite

25. FunçõesAnônimas varexecutaRepeticao=function(repeticao, funcao) { for(var i =0 ; i < repeticao ; i++){ funcao.call(); } } executaRepeticao(2, function(){ alert('teste'); }); //'teste'! 'teste'!

26. Argumentos functionsoma() { var i =0, len =arguments.length, resultado =0; for(; i < len ; i++){ resultado +=arguments[i]; } return resultado; } soma(2); //2 soma(2, 8); //10 soma(1, 2, 4); //7

27. Invocando varconfig= { mensagem: 'Olá de ' }; vardizNome=function(nome){ alert(this.mensagem+ nome); } dizNome('Fulano'); //undefinedFulano dizNome.call(config, 'Fulano'); //Olá de Fulano dizNome.apply(config, ['Fulano']); //Olá de Fulano

28. .call vs .apply varfoo=function(a, b, c) { return a + b + c; } //4 parâmetros, scope + n diversos foo.call(this, 1, 2, 3); //2 parametros, scope + array de diversos foo.apply(this, [1, 2, 3]);

29. Exercícios //1 … varformataReal=formatadorMonetario('R$'), formataDolar=formatadorMonetario('$'); alert(formataReal(2.3)); //R$2.3 alert(formataDolar(2.3)); //$2.3 //2 … var concatenaHifen = concatenador(' - '), concatenaPonto = concatenador('.'); //Javascript-Ninja alert(concatenaHifen('JavaScript', 'Ninja')); //Ext.panel.Panel alert(concatenaPonto('Ext', 'panel', 'Panel'));

30. Exercícios var data1 = { name : 'AAAAA' }, data2 = { name: 'BBBBB' }; functionsetName(data, name){ this.name= name; } data1.setName = data2.setName =setName; data1.setName(data2, 'FFFFFF'); console.log(data1.name); console.log(data2.name); setName.call(data2, data1, 'GGGGG'); console.log(data1.name); console.log(data2.name); data2.setName.apply(data1, [data2, 'LLLLL']); console.log(data1.name); console.log(data2.name);

31. FunçõescomoConstrutores functionpessoa(){ } pessoa(); Aparentementeumafunçãocomum. Um simples exemplo de programaçãointerpretada.

32. FunçõescomoConstrutores functionPessoa(){ } var fulano =newPessoa(); Podeserconsiderado um construtor, apenasadicionandonew

33. Atributos functionPessoa(nome){ this.nome=nome; } var fulano =newPessoa("Fulano"); alert(fulano.nome); //Fulano

34. Prototype functionPessoa(nome){ this.nome=nome; } Pessoa.prototype= { dizerOla: function(){ alert('Olá de '+this.nome); } }; var fulano =newPessoa("Fulano"); fulano.dizerOla(); Prototype podeserconsiderado o corpo da classe. Aondesãoassociadosmétodos e atributos.

35. Prototype functionPessoa(nome){ this.nome=nome; } var fulano =newPessoa("Fulano"); alert(fulano.dizerOla); //undefined Pessoa.prototype.dizerOla=function(){ alert('Olá de '+this.nome); }; alert(fulano.dizerOla); //function fulano.dizerOla(); //Olá de Fulano Alterar o protótipo de umaclassetêmefeitotambémeminstânciaspreviamentecriadas.

36. Herança //retorna um objeto com todos métodos de pessoa newPessoa(); //cria nova classe pirada varPirata=function(){}; //herda os métodos de pessoa Pirata.prototype=newPessoa(); //teste var jack =newPirata("Jack"); jack.dizerOla(); //Olá de Jack

37. Exercício varatleta=newAtleta('Fulano'); alert(atleta.getNome()); //Fulano atleta.setNome('Fulano da Silva'); alert(atleta.getNome()); //Fulano da Silva varjogador=newJogadorFutebol('Ciclano'); alert(jogador.getNome()); //Ciclano jogador.marcarGols(); alert(jogador.getGols()); //1 jogador.marcarGols(2); alert(jogador.getGols()); //3