View
60
Download
1
Category
Preview:
Citation preview
Javascript para Desenvolvedores C#
Sobre o cursoJavascript
Comparação
Parte 1:
Functions
Parte 2:
Conceitos
Parte 3:
POO
Parte 4:
Javascript para CSharpersJavascript para desenvolvedores acostumados com as estruturas do .Net
• Functions são o coração do Javascript• Parâmetros
• Retornos
• Functions como objetos
• Functions como delegates
• “this”
• Callbacks• Promises
• Namespaces
FunctionsParâ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
FunctionsArguments
• Nomear parâmetros servem apenas para mapear argumentos
function bar(fst, sec, thr) {console.log(arguments.length);
}
bar(1); //1bar(1,2,3,4,5); //5
function bar() {console.log(arguments[1]);
}
bar("primeiro", "segundo"); //segundo
FunctionsReturn
• Todas as functions retornam um valor• Se não for definido, será undefined
function foo() {return;return "";return"";
}
Var x = foo() //undefinedVar x = foo() //string
FunctionsApenas um objeto qualquer
• É possível acessar e adicionar propriedades à uma functioncomo qualquer objeto
function fn(a, b, c, d) {console.log('im fn body');
}
console.log(fn.length); //4console.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"
FunctionsClosures e Escopos
//C#var a = "hi";if (true){
var b = a; //ok}var c = b; //não compila
//Javasctiptvar a = "hi";
if (true) {var b = a; //ok
}
var c = b; //ok
//Javasctiptvar a = "hi";function fn() {
if (true) {var b = a; //ok
}}var c = b; //Não mais
ExercíciosFunctions
• 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”)
This
• No C# representa a instancia da classe
class Foo {private string _name;
void Run(string newName){
this._name = newName;}
}
• 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
Thisapply() 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);
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
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 () {});
ExercíciosCallbacks
• 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;
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 invocadocom .then();
- --
- -
- -
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 invocadocom .then();
- -
- - -
- -
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 invocadocom .then();
- -
- - -
- -
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
- -
- - -- -
- -
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")));
}
});
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”.
JavaScript - PromisesConsumo
var promise = new Promise(function(resolve, reject) {....
});
promise.then(function (result) {
console.log(result); // "Sucesso"},function (err) {
console.log(err); // Error: "Falha"}
);
JavaScript - PromisesConsumo – Cadeia de chamadas
var promise = new Promise(function (resolve, reject) {resolve(1);
});
promise.then(function (val) {
console.log(val); // 1return val + 2;
}).then(function (val) {
console.log(val); // 3});
JavaScript - PromisesConsumo – Cadeia de chamadas
- -
-- -
- -
- -
- -- -
- -- -
.then()
.catch()
.then()
.catch()
.then()
.catch()
JavaScript - PromisesConsumo – 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.
JavaScript - PromisesConsumo – 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);});
ExercíciosPromises
• Faça a classe AjaxWithPromise que retorna uma promise com o resultado da operação
FunctionsNamespace
• 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
FunctionsNamespace
• 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() { };
FunctionsNamespace
• Diminuindo a poluição global e encapsulando cada funcionalidade
(function(ns) {var currentTime = new Date();ns.currentTime = function() {
return currentTime;};
})(NDDigial = NDDigial || {});
Quiz
• É possível fazer sobrecarga de métodos no Javascript.• Verdadeiro
• Falso
• Você deve colocar ao menos um return em cada function• Verdadeiro
• Falso
Quiz
• É possível fazer sobrecarga de métodos no Javascript.• Verdadeiro
• Falso
• Você deve colocar ao menos um return em cada function• Verdadeiro
• Falso
Quiz
• Promises são functions configuradas para executarem imediatamente• Verdadeiro
• Falso
• Invocar catch(success,error) é o mesmo que then(undefined, error)• Verdadeiro
• Falso
Quiz
• Promises são functions configuradas para executarem imediatamente• Verdadeiro
• Falso
• Invocar catch(success,error) é o mesmo que then(undefined, error)• Verdadeiro
• Falso
Quiz
• O que é o this no javascript?• window• document• A própria function• Quem chama a function
Quiz
• O que é o this no javascript?• window• document• A própria function• Quem chama a function• Todas ou nenhuma das anteriores
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
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)
Quiz
• Por que devemos separar código em namespaces?
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
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
Javascript para CSharpersJavascript para desenvolvedores acostumados com as estruturas do .Net
Recommended