Javascript para CSharpers 2 - Functions

167 visualizações

Publicada em

Publicada em: Software
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
167
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Functions são o coração do Javascript
    Funçõs dentro de funções passando funções como parâmetros de outras que retorna functions
  • Não há sobrecarga de functions, então quando chamar uma function, você deve enviar todos os parâmetros necessários para garantir de que nenhum deles será undefined
  • var p = new Promise(function(resolve, reject){
    setTimeout(function(){
    resolve("Martelo");
    },2000);
    });

    p.then(function(res){
    console.log(res);
    return res +=" vermelho";

    }).then(function(res){
    console.log(res);
    return res +=" do guerreiro";

    }).then(function(res){
    console.log(res);
    return res +=" de fogo";

    }).then(function(res){
    console.log(res);

    });
  • Javascript para CSharpers 2 - Functions

    1. 1. Javascript para Desenvolvedores C#
    2. 2. Sobre o curso Javascript Comparação Parte 1: Functions Parte 2: Conceitos Parte 3: POO Parte 4:
    3. 3. Javascript para CSharpers Javascript para desenvolvedores acostumados com as estruturas do .Net
    4. 4. • Functions são o coração do Javascript • Parâmetros • Retornos • Functions como objetos • Functions como delegates • “this” • Callbacks • Promises • Namespaces
    5. 5. Functions Parâmetros • Como no C#sqn function fn(um, dois, tres) { console.log('1: ' + um); console.log('2: ' + dois); console.log('3: ' + tres); } fn(1, "2", !!'tres'); fn(true); fn(1, 2, 3, 4, 4, 5);  Sobrecarga? function foo(fst) { console.log("Primeiro"); } function foo(fst,sec) { console.log("Segundo"); } foo(1); //Segundo
    6. 6. Functions Arguments • Nomear parâmetros servem apenas para mapear argumentos function bar(fst, sec, thr) { console.log(arguments.length); } bar(1); //1 bar(1,2,3,4,5); //5 function bar() { console.log(arguments[1]); } bar("primeiro", "segundo"); //segundo
    7. 7. Functions Return • Todas as functions retornam um valor • Se não for definido, será undefined function foo() { return; return ""; return ""; } Var x = foo() //undefined Var x = foo() //string
    8. 8. Functions Apenas um objeto qualquer • É possível acessar e adicionar propriedades à uma function como qualquer objeto function fn(a, b, c, d) { console.log('im fn body'); } console.log(fn.length); //4 console.log(fn.name); //"fn" console.log(fn); //"function(){console.log('im fn body');} " fn.outraFunction = function() { console.log("im inside fn's body"); }; fn.outraFunction(); // "im inside fn's body"
    9. 9. Functions Closures e Escopos //C# var a = "hi"; if (true) { var b = a; //ok } var c = b; //não compila //Javasctipt var a = "hi"; if (true) { var b = a; //ok } var c = b; //ok //Javasctipt var a = "hi"; function fn() { if (true) { var b = a; //ok } } var c = b; //Não mais
    10. 10. Exercícios Functions • Faça uma function que simule chamadas ajax • Ela recebe dois argumentos do tipo string: tipo e o url da chamada, ex: “GET”, “POST”, “DELETE”; • E simplesmente loga o dado de acordo com o tipo da chamada Ex: Fazendo um POST para http://www.sega.com • Pendure na function outras functions que sirvam de atalhos para as chamadas acima • Ex: chamarAjax.get() ao ser invocado, chamara a própria function já passando “GET” • Altere a function para realizar todas as chamadas que são passadas independentemente da quantidade de argumentos • Ex: chamarAjax(“get”,”sega.com”,”ndd.com”,”moc.com”)
    11. 11. This • No C# representa a instancia da classe class Foo { private string _name; void Run(string newName) { this._name = newName; } }
    12. 12. • No Javascript, representa o contexto do proprietário da função. • É possível mudar este contexto com os métodos .apply() e .call() var obj = { name: "algum obj", myFunc: function () { log(this.name); } }; obj.myFunc(); //algum obj function Person() { this.Nome = "Apenas um Teste"; console.log(this.Nome); console.log(this.Rg); } var g = new Person(); h = Person.apply({Rg:'1234'}); This
    13. 13. This apply() e call() • Metodos pertencentes a todo objeto “function”. • Utilizados para alterar o contexto do this Call recebe o this como contexto e sequencialmente os parâmetros (como params[] no C#) Apply recebe o this como contexto e um array com os parametros function Person(nome, rg) { this.Nome = nome; this.Rg = rg; }; var p = {}; Person.call(p, "nome", "14324"); var args = ["nome", "14324"] Person.apply(p, args);
    14. 14. Callbacks • São parâmetros de um método que representam uma instancia de uma função a ser chamada posteriormente. • Similares aos Delegates em .Net. • Função nomeadas ou anônimas. • Podem ser “engatilhadas” para serem executadas em condições específicas
    15. 15. Callbacks Função nomeada • Cria um novo escopo de execução • Atribui o valor de “this” para a janela de execução do browser Callbacks Função anônima • Assume o contexto aonde foi criada • A referência “this” passa a ser o objeto atual em que a função foi declarada function request(callback) { callback(); } request(executeAfterRequest); function executeAfterRequest() { } function request(callback) { callback(); } request(function () { });
    16. 16. Exercícios Callbacks • Adicione na function que faz chamadas ajax um argumento de callback que determine como o request será logado: • document.write(); • console.log(); • alert(); • Também recebe um callback de erro, caso a url não contenha “https://” ele loga uma mensagem nada agradavel;
    17. 17. Promises • São objetos utilizados para coisas demoradas ou que saem do escopo da aplicação • Chamadas para API • Animações • Processos “paralelos” • Simula programação async • Similar ao objeto Task<T> • Depois de criado deve ser invocado com .then(); - -- - - - -
    18. 18. Promises • São objetos utilizados para coisas demoradas ou que saem do escopo da aplicação • Chamadas para API • Animações • Processos “paralelos” • Simula programação async • Similar ao objeto Task<T> • Depois de criado deve ser invocado com .then(); - - - - - - -
    19. 19. Promises • São objetos utilizados para coisas demoradas ou que saem do escopo da aplicação • Chamadas para API • Animações • Processos “paralelos” • Simula programação async • Similar ao objeto Task<T> • Depois de criado deve ser invocado com .then(); - - - - - - -
    20. 20. Promises • Utiliza a função Promise • Esta recebe no construtor um callback com 2 parâmetros • Resolve • Callback utilizado para finalizar a Promise com sucesso • Reject • Callback para finalizar a Promise com erro - - - - - - - - -
    21. 21. Promises var promise = new Promise(function(resolve, reject) { // processamento “assíncrono” if (/* teste se o processamento foi satisfatório */) { resolve("Sucesso"); } else { reject(Error("Falha"))); } });
    22. 22. Promises • Utiliza o método “then” para invocar o Promise. • O método “then” recebe 2 parâmetros (ambos opcionais): • Um callback para as situações de sucesso. • Utilizando o método “resolve”. • Um callback para as situações de erro. • Utilizando o método “reject”. • Pode ser criado uma corrente de chamadas “then”.
    23. 23. JavaScript - Promises Consumo var promise = new Promise(function(resolve, reject) { .... }); promise.then( function (result) { console.log(result); // "Sucesso" }, function (err) { console.log(err); // Error: "Falha" } );
    24. 24. JavaScript - Promises Consumo – Cadeia de chamadas var promise = new Promise(function (resolve, reject) { resolve(1); }); promise .then(function (val) { console.log(val); // 1 return val + 2; }) .then(function (val) { console.log(val); // 3 });
    25. 25. JavaScript - Promises Consumo – Cadeia de chamadas - - - - - - - - - - - - - - - - - .then() .catch() .then() .catch() .then() .catch()
    26. 26. JavaScript - Promises Consumo – Tratamento de erros • Pode ser utilizado o método “catch” ao invés do segundo callback no “then”. • É um atalho para o equivalente à “.then(undefined, func)”. • Utilizando os 2 callbacks, somente 1 será chamado. • Utilizando “then” seguido de “catch” ambos são chamados se a promise for rejeitada.
    27. 27. JavaScript - Promises Consumo – Tratamento de erros promise .then(function (val) { console.log("Sucesso", val); }) .catch(function (error) { console.log("Falha", error); }); promise .then(function (val) { console.log("Sucesso", val); }) .then(undefined, function (error) { console.log("Falha", error); });
    28. 28. Exercícios Promises • Faça a classe AjaxWithPromise que retorna uma promise com o resultado da operação
    29. 29. Functions Namespace • Problema: Colisão de nomes em aplicativos de grande porte • Solução: Simular Namespaces do C# usando IIFEs (Immediately Invoked Function Expression) (function() { var appName = 'foo'; var compileTime = new Date(); function printAppInfo() { return appName + " : " + compileTime; } })(); console.log(printAppInfo()); //nope
    30. 30. Functions Namespace • Javascript não tem namespaces reais • Podem ser criados como objetos var Enterprise = Enterprise || {}; Enterprise.currentTime = function() { return new Date(); }; Enterprise.Models = Enterprise.Models || {}; Enterprise.Models.Aluno = function() { };
    31. 31. Functions Namespace • Diminuindo a poluição global e encapsulando cada funcionalidade (function(ns) { var currentTime = new Date(); ns.currentTime = function() { return currentTime; }; })(NDDigial = NDDigial || {});
    32. 32. Quiz • É possível fazer sobrecarga de métodos no Javascript. • Verdadeiro • Falso • Você deve colocar ao menos um return em cada function • Verdadeiro • Falso
    33. 33. Quiz • É possível fazer sobrecarga de métodos no Javascript. • Verdadeiro • Falso • Você deve colocar ao menos um return em cada function • Verdadeiro • Falso
    34. 34. Quiz • Promises são functions configuradas para executarem imediatamente • Verdadeiro • Falso • Invocar catch(success,error) é o mesmo que then(undefined, error) • Verdadeiro • Falso
    35. 35. Quiz • Promises são functions configuradas para executarem imediatamente • Verdadeiro • Falso • Invocar catch(success,error) é o mesmo que then(undefined, error) • Verdadeiro • Falso
    36. 36. Quiz • O que é o this no javascript? • window • document • A própria function • Quem chama a function
    37. 37. Quiz • O que é o this no javascript? • window • document • A própria function • Quem chama a function • Todas ou nenhuma das anteriores
    38. 38. Quiz O que é o código vai logar? var a = 0; if (a) { while (a === 0) { var b = a - 1; a += 1; } } console.log(b); • 0 • 1 • -1 • undefined
    39. 39. Quiz O que é o código vai logar? var a = 0; if (a) { while (a === 0) { var b = a - 1; a += 1; } } console.log(b); • 0 • 1 • -1 • Undefined (não chegou a executar)
    40. 40. Quiz • Por que devemos separar código em namespaces?
    41. 41. Quiz • Por que devemos separar código em namespaces? • I – Facilita encontrar erros em grandes aplicações • II – Evita conflitos com nomes de variáveis • III – Evita problemas de precisar de módulos ainda não inicializados • IV – Organiza o código • V – Protege nosso código de bibliotecas externas
    42. 42. Revisão • Let me function that for you • Parâmetros são totalmente flexíveis • Não existe sobrecarga • Functions são objetos • Callbacks que vão e voltam • O futuro é uma Promise • O “this” pode ser alterado • Apenas functions definem escopos • Que podem ser usados para proteger namespaces
    43. 43. Javascript para CSharpers Javascript para desenvolvedores acostumados com as estruturas do .Net

    ×