O documento discute conceitos avançados de JavaScript, incluindo: 1) Variáveis e referências, como variáveis podem referenciar objetos, arrays e valores primitivos; 2) Objetos, como representam conjuntos de propriedades e métodos, e podem ser usados para representar dados; 3) Funções, incluindo funções anônimas, argumentos, invocação com call e apply.

1. JavascriptAvançadoBruno Tavares

2. Referências

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

4. Referênciaspodemser re-alocadasvarref= {};console.log(typeof ref); //objectref = [1 , 4, 2];console.log(typeof ref); //objectref=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ênciasglobaisalert('Teste');window.alert('Teste');refGlobal='abc';console.log(window.refGlobal); //abcconsole.log(window['refGlobal']); //abc

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

9. Exercícios//2functionsetName(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//3functionsetVariables(){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 Tudovar hoje =newDate();hoje.bar='teste';hoje.foo=function(){alert(this.bar);}hoje.foo(); //teste

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

17. PropriedadesExpandovarconfig= { expanded: false};config.expanded; //falseconfig['expanded']; //false

18. //ReferenceError: Ext is not definedif(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); //10alert(data.rows[0].id); //3//2 ...alert(fulano.nome); //Fulanoalert(fulano.getNome()); //Fulano//3var teste1 = {nome: 'Fulano’} teste2 = {descricao: 'LoremIpsum'};//...alerta(teste1, 'nome'); //Fulanoalerta(teste2, 'descricao'); //LoremIpsum

21. Funções

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

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

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

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

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

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

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

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

30. Exercíciosvar 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çõescomoConstrutoresfunctionpessoa(){}pessoa();Aparentementeumafunçãocomum. Um simples exemplo de programaçãointerpretada.

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

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

34. PrototypefunctionPessoa(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. PrototypefunctionPessoa(nome){this.nome=nome;}var fulano =newPessoa("Fulano");alert(fulano.dizerOla); //undefinedPessoa.prototype.dizerOla=function(){alert('Olá de '+this.nome);};alert(fulano.dizerOla); //functionfulano.dizerOla(); //Olá de FulanoAlterar o protótipo de umaclassetêmefeitotambémeminstânciaspreviamentecriadas.

36. Herança//retorna um objeto com todos métodos de pessoanewPessoa(); //cria nova classe piradavarPirata=function(){};//herda os métodos de pessoaPirata.prototype=newPessoa();//testevar jack =newPirata("Jack");jack.dizerOla(); //Olá de Jack

37. Exercíciovaratleta=newAtleta('Fulano');alert(atleta.getNome()); //Fulanoatleta.setNome('Fulano da Silva');alert(atleta.getNome()); //Fulano da Silvavarjogador=newJogadorFutebol('Ciclano');alert(jogador.getNome()); //Ciclanojogador.marcarGols();alert(jogador.getGols()); //1jogador.marcarGols(2);alert(jogador.getGols()); //3