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