Your SlideShare is downloading. ×
  • Like
  • Save
Javascript Avançado
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Javascript Avançado

  • 1,385 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,385
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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